.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--dc-space-2);
  min-height: 44px;
  padding-inline: var(--dc-space-4);
  padding-block: var(--dc-space-2);
  border-radius: var(--dc-radius-pill);
  font-family: var(--dc-font-sans);
  font-size: var(--dc-fs-14);
  font-weight: var(--dc-fw-medium);
  line-height: 1;
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn--primary {
  background-color: var(--dc-primary);
  color: var(--dc-fg-on-primary);
  border-color: var(--dc-primary);
}

.btn--primary:hover {
  background-color: var(--dc-primary-700);
  border-color: var(--dc-primary-700);
}

.btn--secondary {
  background-color: transparent;
  color: var(--dc-primary);
  border-color: var(--dc-primary);
}

.btn--secondary:hover {
  background-color: var(--dc-gray-100);
}

.btn--ghost {
  background-color: transparent;
  color: var(--dc-fg);
  border-color: transparent;
}

.btn--ghost:hover {
  background-color: var(--dc-gray-100);
}

.btn--destructive {
  background-color: var(--dc-estado-denegado);
  color: var(--dc-fg-on-primary);
  border-color: var(--dc-estado-denegado);
}

.btn--destructive:hover {
  background-color: #9E2C24;
  border-color: #9E2C24;
}

.btn[aria-disabled="true"],
.btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: girar 0.7s linear infinite;
}

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

.btn__icono {
  display: inline-flex;
  align-items: center;
}

.campo {
  display: flex;
  flex-direction: column;
  gap: var(--dc-space-1);
}

.campo__etiqueta {
  font-size: var(--dc-fs-14);
  font-weight: var(--dc-fw-medium);
  color: var(--dc-fg);
}

.campo__requerido {
  color: var(--dc-estado-denegado);
  margin-inline-start: 2px;
}

.campo__control {
  min-height: 44px;
  padding-inline: var(--dc-space-3);
  padding-block: var(--dc-space-2);
  border: 1.5px solid var(--dc-gray-500);
  border-radius: var(--dc-radius-md);
  font-family: var(--dc-font-sans);
  font-size: var(--dc-fs-16);
  color: var(--dc-fg);
  background-color: var(--dc-bg-elevated);
  transition: border-color 0.15s ease;
}

.campo__control:focus {
  outline: none;
  border-color: var(--dc-primary);
  box-shadow: var(--dc-focus-ring);
}

.campo__control--error {
  border-color: var(--dc-estado-denegado);
}

.campo__control:disabled {
  background-color: var(--dc-gray-100);
  color: var(--dc-gray-400);
  cursor: not-allowed;
}

select.campo__control {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m19.5 8.25-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--dc-space-3) center;
  background-size: 16px;
  padding-inline-end: var(--dc-space-10);
}

textarea.campo__control {
  min-height: 88px;
  resize: vertical;
}

.campo--checkbox,
.campo--radio {
  flex-direction: row;
  align-items: center;
  gap: var(--dc-space-2);
}

.campo--checkbox .campo__etiqueta,
.campo--radio .campo__etiqueta {
  font-weight: var(--dc-fw-regular);
  cursor: pointer;
}

.checkbox__control,
.radio__control {
  width: 20px;
  height: 20px;
  min-height: unset;
  border: 1.5px solid var(--dc-gray-500);
  accent-color: var(--dc-primary);
  cursor: pointer;
  flex-shrink: 0;
}

.checkbox__control:focus-visible,
.radio__control:focus-visible {
  outline: none;
  box-shadow: var(--dc-focus-ring);
}

.campo--switch {
  flex-direction: row;
  align-items: center;
  gap: var(--dc-space-3);
}

.switch__control {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 48px;
  height: 28px;
  min-height: 44px;
  border: none;
  border-radius: var(--dc-radius-pill);
  background-color: var(--dc-gray-500);
  cursor: pointer;
  transition: background-color 0.2s ease;
  padding: 0;
}

.switch__control--activo {
  background-color: var(--dc-primary);
}

.switch__control[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

.switch__pulgar {
  position: absolute;
  left: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--dc-bg);
  transition: transform 0.2s ease;
}

.switch__control--activo .switch__pulgar {
  transform: translateX(20px);
}

.inline-error {
  font-size: var(--dc-fs-14);
  color: var(--dc-estado-denegado);
}

.card {
  background-color: var(--dc-bg-elevated);
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-xl);
  box-shadow: var(--dc-shadow-md);
  overflow: hidden;
}

.card__encabezado {
  padding: var(--dc-space-4) var(--dc-space-6);
  border-bottom: 1px solid var(--dc-border);
}

.card__titulo {
  font-size: var(--dc-fs-18);
  font-weight: var(--dc-fw-semibold);
  color: var(--dc-fg);
}

.card__cuerpo {
  padding: var(--dc-space-6);
}

.panel {
  background-color: var(--dc-gray-100);
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-md);
  overflow: hidden;
}

.panel__encabezado {
  padding: var(--dc-space-4) var(--dc-space-5);
  border-bottom: 1px solid var(--dc-border);
}

.panel__titulo {
  font-size: var(--dc-fs-16);
  font-weight: var(--dc-fw-semibold);
  color: var(--dc-fg);
}

.panel__cuerpo {
  padding: var(--dc-space-5);
}

.divider {
  border: none;
  border-top: 1px solid var(--dc-border);
  margin-block: var(--dc-space-4);
}

.tabla-contenedor {
  width: 100%;
  overflow-x: auto;
}

.tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--dc-fs-14);
}

.tabla--compacta {
  width: auto;
  max-width: 100%;
}

.tabla--compacta .tabla__th,
.tabla--compacta .tabla__td {
  padding-right: var(--dc-space-8);
}

.tabla--compacta .tabla__th:last-child,
.tabla--compacta .tabla__td:last-child {
  padding-right: var(--dc-space-4);
}

.tabla__caption {
  text-align: left;
  font-size: var(--dc-fs-14);
  font-weight: var(--dc-fw-medium);
  color: var(--dc-gray-500);
  padding-block-end: var(--dc-space-2);
}

.tabla__th {
  text-align: left;
  font-weight: var(--dc-fw-semibold);
  color: var(--dc-gray-500);
  padding: var(--dc-space-3) var(--dc-space-4);
  border-bottom: 1px solid var(--dc-border);
  white-space: nowrap;
}

.tabla__td {
  padding: var(--dc-space-3) var(--dc-space-4);
  color: var(--dc-fg);
  border-bottom: 1px solid var(--dc-border);
  vertical-align: middle;
}

.tabla__fila:last-child .tabla__td {
  border-bottom: none;
}

.tabla__vacio {
  padding: var(--dc-space-8) var(--dc-space-4);
  text-align: center;
  color: var(--dc-gray-500);
}

.paginacion {
  display: flex;
  justify-content: center;
}

.paginacion__lista {
  display: flex;
  list-style: none;
  gap: var(--dc-space-1);
  padding: 0;
  margin: 0;
}

.paginacion__enlace {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding-inline: var(--dc-space-3);
  border-radius: var(--dc-radius-md);
  font-size: var(--dc-fs-14);
  font-weight: var(--dc-fw-medium);
  color: var(--dc-fg);
  text-decoration: none;
  border: 1px solid var(--dc-border);
  transition: background-color 0.15s ease;
}

.paginacion__enlace:hover {
  background-color: var(--dc-gray-100);
}

.paginacion__enlace--activo {
  background-color: var(--dc-primary);
  color: var(--dc-fg-on-primary);
  border-color: var(--dc-primary);
}

.tabs__lista {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--dc-border);
  padding: 0;
  margin: 0;
}

.tabs__tab {
  min-height: 44px;
  padding-inline: var(--dc-space-4);
  padding-block: var(--dc-space-2);
  border: none;
  background: transparent;
  font-family: var(--dc-font-sans);
  font-size: var(--dc-fs-14);
  font-weight: var(--dc-fw-medium);
  color: var(--dc-gray-500);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.tabs__tab:hover {
  color: var(--dc-fg);
}

.tabs__tab--activo {
  color: var(--dc-primary);
  border-bottom-color: var(--dc-primary);
}

.tabs__panel {
  padding-block: var(--dc-space-5);
}

.breadcrumb__lista {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--dc-space-1);
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: var(--dc-fs-14);
}

.breadcrumb__item {
  display: flex;
  align-items: center;
  gap: var(--dc-space-1);
}

.breadcrumb__enlace {
  color: var(--dc-primary);
  text-decoration: none;
}

.breadcrumb__enlace:hover {
  text-decoration: underline;
}

.breadcrumb__separador {
  color: var(--dc-gray-500);
}

.breadcrumb__actual {
  color: var(--dc-gray-500);
  font-weight: var(--dc-fw-medium);
}

.modal__dialog {
  position: fixed;
  inset: 0;
  margin: auto;
  max-width: min(560px, 90vw);
  max-height: 90vh;
  border: none;
  border-radius: var(--dc-radius-2xl);
  box-shadow: var(--dc-shadow-xl);
  background-color: var(--dc-bg-elevated);
  padding: 0;
  overflow-y: auto;
  z-index: 100;
}

.modal__contenedor {
  padding: var(--dc-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--dc-space-4);
}

.modal__encabezado {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal__titulo {
  font-size: var(--dc-fs-18);
  font-weight: var(--dc-fw-semibold);
  color: var(--dc-fg);
}

.modal__cerrar {
  padding: var(--dc-space-2);
}

.modal__cuerpo {
  color: var(--dc-fg);
}

.modal__frase-instruccion {
  margin-block-end: var(--dc-space-3);
  font-size: var(--dc-fs-14);
}

.modal__input-confirmacion {
  width: 100%;
}

.modal__pie {
  display: flex;
  gap: var(--dc-space-3);
  justify-content: flex-end;
}

.modal__backdrop {
  position: fixed;
  inset: 0;
  background-color: rgb(0 0 0 / 0.5);
  z-index: 99;
}

.sidebar {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.sidebar__rail {
  width: 240px;
  background-color: var(--dc-bg-elevated);
  border-inline-end: 1px solid var(--dc-border);
  padding: var(--dc-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--dc-space-2);
  transition: width 0.2s ease;
}

.sidebar--colapsada .sidebar__rail {
  width: 64px;
}

@media (prefers-reduced-motion: reduce) {
  .sidebar__rail {
    transition: none;
  }
}

.sidebar__lista {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--dc-space-1);
}

.sidebar__enlace {
  display: flex;
  align-items: center;
  gap: var(--dc-space-3);
  min-height: 44px;
  padding-inline: var(--dc-space-3);
  border-radius: var(--dc-radius-md);
  color: var(--dc-fg);
  text-decoration: none;
  font-size: var(--dc-fs-14);
  font-weight: var(--dc-fw-medium);
  transition: background-color 0.15s ease;
}

.sidebar__enlace:hover {
  background-color: var(--dc-gray-100);
}

.sidebar__enlace--activo {
  background-color: var(--dc-gray-100);
  color: var(--dc-primary);
}

.sidebar__enlace:focus-visible {
  outline: none;
  box-shadow: var(--dc-focus-ring);
}

.sidebar__drawer-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background-color: rgb(0 0 0 / 0.5);
  z-index: 49;
}

@media (max-width: 768px) {
  .sidebar__rail {
    display: none;
  }

  .sidebar__drawer-backdrop {
    display: block;
  }
}

.sidebar__drawer {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  width: 280px;
  background-color: var(--dc-bg-elevated);
  border-inline-end: 1px solid var(--dc-border);
  padding: var(--dc-space-4);
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: var(--dc-space-2);
}

.sidebar__grupo {
  display: flex;
  flex-direction: column;
  gap: var(--dc-space-1);
}

.sidebar__grupo + .sidebar__grupo {
  margin-top: var(--dc-space-3);
  padding-top: var(--dc-space-3);
  border-top: 1px solid var(--dc-border);
}

.sidebar__grupo-titulo {
  display: block;
  font-size: 11px;
  font-weight: var(--dc-fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--dc-gray-400);
  padding-inline: var(--dc-space-3);
  padding-block-end: var(--dc-space-1);
}

.sidebar__enlace--deshabilitado {
  cursor: default;
  opacity: 0.5;
  pointer-events: none;
}

.topbar {
  background-color: var(--dc-bg-elevated);
  border-block-end: 1px solid var(--dc-border);
  height: 64px;
}

.age-band-selector {
  border: none;
  padding: 0;
  margin: 0;
}

.age-band-selector__leyenda {
  font-size: var(--dc-fs-14);
  font-weight: var(--dc-fw-semibold);
  color: var(--dc-fg);
  margin-block-end: var(--dc-space-3);
}

.age-band-selector__lista {
  display: flex;
  flex-direction: column;
  gap: var(--dc-space-2);
}

.age-band-selector__opcion {
  display: flex;
  align-items: flex-start;
  gap: var(--dc-space-3);
  min-height: 48px;
  padding: var(--dc-space-3);
  border: 1.5px solid var(--dc-gray-300);
  border-radius: var(--dc-radius-md);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.age-band-selector__opcion:has(.age-band-selector__radio:checked) {
  border-color: var(--dc-primary);
  background-color: var(--dc-primary-50);
}

.age-band-selector__opcion:focus-within {
  box-shadow: var(--dc-focus-ring);
}

.age-band-selector__radio {
  margin-block-start: 2px;
  width: 20px;
  height: 20px;
  min-height: unset;
  flex-shrink: 0;
  accent-color: var(--dc-primary);
  cursor: pointer;
}

.age-band-selector__etiqueta {
  display: flex;
  flex-direction: column;
  gap: var(--dc-space-1);
  cursor: pointer;
}

.age-band-selector__rango {
  font-size: var(--dc-fs-14);
  font-weight: var(--dc-fw-semibold);
  color: var(--dc-fg);
}

.age-band-selector__regla {
  font-size: var(--dc-fs-12);
  color: var(--dc-gray-600);
  line-height: 1.4;
}

.vault-identity-viewer {
  display: flex;
  flex-direction: column;
  gap: var(--dc-space-4);
  border: 1.5px solid var(--dc-border);
  border-radius: var(--dc-radius-xl);
  padding: var(--dc-space-5);
  background-color: var(--dc-bg-elevated);
}

.vault-identity-viewer--enmascarado {
  border-color: var(--dc-gray-300);
}

.vault-identity-viewer--revelado {
  border-color: var(--dc-estado-info);
  background-color: var(--dc-estado-info-bg);
}

.vault-identity-viewer__aviso-auditado {
  display: flex;
  align-items: center;
  gap: var(--dc-space-2);
  font-size: var(--dc-fs-12);
  color: var(--dc-estado-info);
  font-weight: var(--dc-fw-medium);
}

.vault-identity-viewer--enmascarado .vault-identity-viewer__aviso-auditado {
  color: var(--dc-gray-500);
}

.vault-identity-viewer__icono-aviso {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.vault-identity-viewer__campos {
  display: flex;
  flex-direction: column;
  gap: var(--dc-space-3);
  margin: 0;
  padding: 0;
}

.vault-identity-viewer__campo {
  display: grid;
  grid-template-columns: minmax(140px, auto) 1fr;
  gap: var(--dc-space-2);
  align-items: center;
  min-height: 32px;
}

.vault-identity-viewer__etiqueta {
  font-size: var(--dc-fs-12);
  font-weight: var(--dc-fw-semibold);
  color: var(--dc-gray-600);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.vault-identity-viewer__valor {
  font-size: var(--dc-fs-14);
  color: var(--dc-fg);
  font-weight: var(--dc-fw-medium);
}

.vault-identity-viewer__valor--mascara {
  color: var(--dc-gray-400);
  font-style: italic;
  letter-spacing: 0.02em;
}

.vault-identity-viewer__acciones {
  display: flex;
  justify-content: flex-end;
}

.vault-identity-viewer__icono-btn {
  width: 16px;
  height: 16px;
}

.app-shell {
  display: flex;
  flex: 1;
  min-height: 0;
  height: calc(100vh - 64px);
}

.app-shell__main {
  flex: 1;
  overflow-y: auto;
  padding: var(--dc-space-6);
  background-color: var(--dc-bg);
}

.vista {
  width: 100%;
  margin-inline: auto;
}

.vista--amplia {
  max-width: 1200px;
}

.vista--lectura {
  max-width: 960px;
}

.hub {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--dc-space-4);
  margin-top: var(--dc-space-6);
}

.hub__seccion {
  display: flex;
  flex-direction: column;
  gap: var(--dc-space-3);
}

.hub__titulo {
  margin: 0;
  font-size: var(--dc-fs-12);
  font-weight: var(--dc-fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dc-fg-muted);
}

.hub__acciones {
  display: flex;
  flex-direction: column;
  gap: var(--dc-space-2);
}

.hub__acciones .btn {
  width: 100%;
  justify-content: flex-start;
}

.celda-dist {
  display: flex;
  align-items: center;
  gap: var(--dc-space-2);
}

.barra-dist {
  display: inline-block;
  width: 180px;
  max-width: 40vw;
  height: 10px;
  background: var(--dc-gray-200);
  border-radius: var(--dc-radius-pill);
  overflow: hidden;
}

.barra-dist__relleno {
  display: block;
  height: 100%;
  background: var(--dc-primary);
  border-radius: inherit;
}

.barra-dist__valor {
  font-variant-numeric: tabular-nums;
  font-weight: var(--dc-fw-medium);
}

@media (max-width: 768px) {
  .app-shell {
    flex-direction: column;
  }
}

.topbar__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding-inline: var(--dc-space-6);
}

.topbar__nombre {
  font-size: var(--dc-fs-16);
  font-weight: var(--dc-fw-semibold);
  color: var(--dc-fg);
}

.topbar__acciones {
  display: flex;
  align-items: center;
  gap: var(--dc-space-2);
}

.topbar__btn-icono {
  padding: var(--dc-space-2);
}

.topbar__usuario-nombre {
  font-size: var(--dc-fs-14);
  color: var(--dc-gray-500);
}

.topbar__logout {
  display: flex;
  margin: 0;
}

.topbar__org-nombre {
  font-size: var(--dc-fs-14);
  font-weight: var(--dc-fw-medium);
  color: var(--dc-fg);
}

.topbar__cambiar {
  display: flex;
  margin: 0;
}

.topbar__izquierda {
  display: flex;
  align-items: center;
  gap: var(--dc-space-3);
}

.topbar__btn-cambiar {
  gap: var(--dc-space-1);
  font-size: var(--dc-fs-13);
  min-height: 36px;
  padding-inline: var(--dc-space-2);
}

.topbar__usuario {
  display: flex;
  align-items: center;
  gap: var(--dc-space-2);
  padding-inline: var(--dc-space-3);
  padding-block: var(--dc-space-1);
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-md);
  min-height: 36px;
}

.topbar__usuario-rol {
  font-size: var(--dc-fs-12);
  color: var(--dc-gray-400);
  font-weight: var(--dc-fw-medium);
}

.topbar__2fa {
  display: flex;
  align-items: center;
}

.topbar__2fa svg {
  width: 16px;
  height: 16px;
}

.topbar__2fa--activo {
  color: var(--dc-estado-otorgado);
}

.topbar__2fa--inactivo {
  color: var(--dc-gray-300);
}

.dashboard-conteos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--dc-space-4);
  margin-top: var(--dc-space-6);
}

.toast {
  display: flex;
  align-items: flex-start;
  border-radius: var(--dc-radius-md);
  padding: var(--dc-space-4);
  box-shadow: var(--dc-shadow-md);
  min-width: 280px;
  max-width: 420px;
}

.toast--error {
  background-color: var(--dc-estado-denegado-bg);
  border: 1px solid #E7B0AB;
}

.toast--warning {
  background-color: var(--dc-estado-pendiente-bg);
  border: 1px solid #EBC79B;
}

.toast--success {
  background-color: var(--dc-estado-otorgado-bg);
  border: 1px solid #BFE0B3;
}

.toast--info {
  background-color: var(--dc-estado-info-bg);
  border: 1px solid #AECBE2;
}

.toast__interior {
  display: flex;
  align-items: flex-start;
  gap: var(--dc-space-3);
  width: 100%;
}

.toast__mensaje {
  flex: 1;
  font-size: var(--dc-fs-14);
  color: var(--dc-fg);
}

.toast__cerrar {
  padding: var(--dc-space-1);
}

.toast__icono {
  flex-shrink: 0;
}

.alert-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--dc-space-4);
  padding: var(--dc-space-4) var(--dc-space-5);
  border-radius: var(--dc-radius-md);
  border-width: 1px;
  border-style: solid;
}

.alert-banner--error {
  background-color: var(--dc-estado-denegado-bg);
  border-color: #E7B0AB;
}

.alert-banner--warning {
  background-color: var(--dc-estado-pendiente-bg);
  border-color: #EBC79B;
}

.alert-banner--success {
  background-color: var(--dc-estado-otorgado-bg);
  border-color: #BFE0B3;
}

.alert-banner--info {
  background-color: var(--dc-estado-info-bg);
  border-color: #AECBE2;
}

.alert-banner__titulo {
  font-weight: var(--dc-fw-semibold);
  font-size: var(--dc-fs-14);
  color: var(--dc-fg);
}

.alert-banner__mensaje {
  font-size: var(--dc-fs-14);
  color: var(--dc-gray-500);
  margin-block-start: var(--dc-space-1);
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--dc-space-4);
  padding: var(--dc-space-12) var(--dc-space-6);
  text-align: center;
}

.empty-state__icono {
  color: var(--dc-gray-400);
}

.empty-state__titulo {
  font-size: var(--dc-fs-18);
  font-weight: var(--dc-fw-semibold);
  color: var(--dc-fg);
}

.empty-state__descripcion {
  font-size: var(--dc-fs-14);
  color: var(--dc-gray-500);
  max-width: 400px;
}

.skeleton {
  background-color: var(--dc-gray-100);
  border-radius: var(--dc-radius-md);
  min-height: 20px;
  animation: pulso 1.5s ease-in-out infinite;
}

@keyframes pulso {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton {
    animation: none;
  }
}

.spinner-contenedor {
  display: inline-flex;
  align-items: center;
  gap: var(--dc-space-2);
}

.stepper {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: var(--dc-space-4);
}

.stepper__paso {
  display: flex;
  align-items: center;
  gap: var(--dc-space-2);
  font-size: var(--dc-fs-14);
}

.stepper__numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-weight: var(--dc-fw-semibold);
  font-size: var(--dc-fs-12);
  background-color: var(--dc-gray-100);
  color: var(--dc-gray-500);
  border: 1.5px solid var(--dc-border);
}

.stepper__paso--activo .stepper__numero {
  background-color: var(--dc-primary);
  color: var(--dc-fg-on-primary);
  border-color: var(--dc-primary);
}

.stepper__paso--completado .stepper__numero {
  background-color: var(--dc-estado-otorgado);
  color: var(--dc-fg-on-primary);
  border-color: var(--dc-estado-otorgado);
}

.stepper__etiqueta {
  color: var(--dc-gray-500);
}

.stepper__paso--activo .stepper__etiqueta {
  color: var(--dc-fg);
  font-weight: var(--dc-fw-medium);
}

.file-upload {
  display: flex;
  flex-direction: column;
  gap: var(--dc-space-3);
}

.file-upload__zona {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--dc-space-3);
  padding: var(--dc-space-8);
  border: 2px dashed var(--dc-gray-500);
  border-radius: var(--dc-radius-md);
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.file-upload__zona:hover,
.file-upload--arrastrando .file-upload__zona {
  border-color: var(--dc-primary);
  background-color: var(--dc-estado-info-bg);
}

.file-upload__texto {
  font-size: var(--dc-fs-14);
  color: var(--dc-gray-500);
}

.file-upload__estado {
  display: inline-flex;
  align-items: center;
  gap: var(--dc-space-2);
  padding: var(--dc-space-2) var(--dc-space-3);
  border-radius: var(--dc-radius-pill);
  font-size: var(--dc-fs-12);
  font-weight: var(--dc-fw-medium);
}

.file-upload__estado--pendiente {
  background-color: var(--dc-gray-100);
  color: var(--dc-gray-500);
}

.file-upload__estado--limpio {
  background-color: var(--dc-estado-otorgado-bg);
  color: var(--dc-estado-otorgado);
}

.file-upload__estado--bloqueado {
  background-color: var(--dc-estado-denegado-bg);
  color: var(--dc-estado-denegado);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--dc-space-1);
  padding: var(--dc-space-1) var(--dc-space-2);
  border-radius: var(--dc-radius-pill);
  font-size: var(--dc-fs-12);
  font-weight: var(--dc-fw-medium);
}

.badge--exito {
  background-color: var(--dc-estado-otorgado);
  color: var(--dc-fg-on-primary);
}

.badge--error {
  background-color: var(--dc-estado-denegado);
  color: var(--dc-fg-on-primary);
}

.badge--info {
  background-color: var(--dc-estado-info);
  color: var(--dc-fg-on-primary);
}

.badge--advertencia {
  background-color: var(--dc-estado-pendiente);
  color: var(--dc-fg-on-primary);
}

.badge__icono {
  display: inline-flex;
}

.tag {
  display: inline-flex;
  align-items: center;
  padding: var(--dc-space-1) var(--dc-space-3);
  border-radius: var(--dc-radius-pill);
  font-size: var(--dc-fs-12);
  font-weight: var(--dc-fw-medium);
  background-color: var(--dc-gray-100);
  color: var(--dc-gray-500);
  border: 1px solid var(--dc-border);
}

.badge-modo {
  display: inline-flex;
  align-items: center;
  gap: var(--dc-space-2);
  padding: var(--dc-space-1) var(--dc-space-3);
  border-radius: var(--dc-radius-pill);
  font-size: var(--dc-fs-12);
  font-weight: var(--dc-fw-medium);
}

.badge-modo--anonima {
  background-color: var(--dc-gray-500);
  color: var(--dc-fg-on-primary);
}

.badge-modo--seudonima {
  background-color: var(--dc-estado-info);
  color: var(--dc-fg-on-primary);
}

.badge-modo--identificable {
  background-color: var(--dc-estado-pendiente);
  color: var(--dc-fg-on-primary);
}

.badge-modo__icono {
  display: inline-flex;
}

.consent-card {
  background-color: var(--dc-bg-elevated);
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-md);
  overflow: hidden;
}

.consent-card__encabezado {
  padding: var(--dc-space-4) var(--dc-space-5);
  border-block-end: 1px solid var(--dc-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.consent-card__estado-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--dc-space-2);
  font-size: var(--dc-fs-14);
  font-weight: var(--dc-fw-medium);
}

.consent-card--otorgado .consent-card__estado-badge {
  color: var(--dc-estado-otorgado);
}

.consent-card--denegado .consent-card__estado-badge {
  color: var(--dc-estado-denegado);
}

.consent-card--pendiente .consent-card__estado-badge {
  color: var(--dc-estado-pendiente);
}

.consent-card__cuerpo {
  padding: var(--dc-space-4) var(--dc-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--dc-space-1);
}

.consent-card__pseudo-id {
  font-size: var(--dc-fs-14);
  font-family: var(--dc-font-mono);
  color: var(--dc-gray-500);
}

.consent-card__fecha {
  font-size: var(--dc-fs-12);
  color: var(--dc-gray-400);
}

.consent-card__acciones {
  padding: var(--dc-space-4) var(--dc-space-5);
  border-block-start: 1px solid var(--dc-border);
}

.gate-etico {
  display: flex;
  flex-direction: column;
  gap: var(--dc-space-3);
  padding: var(--dc-space-4);
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-md);
  background-color: var(--dc-bg-elevated);
}

.gate-etico__nivel {
  display: flex;
  align-items: center;
  gap: var(--dc-space-2);
  font-size: var(--dc-fs-14);
  font-weight: var(--dc-fw-medium);
  color: var(--dc-fg);
}

.gate-etico__bloqueo {
  display: flex;
  align-items: flex-start;
  gap: var(--dc-space-3);
  padding: var(--dc-space-3) var(--dc-space-4);
  border-radius: var(--dc-radius-md);
  background-color: var(--dc-estado-denegado-bg);
  border: 1px solid #E7B0AB;
  font-size: var(--dc-fs-14);
  color: var(--dc-fg);
}

.gate-etico__icono-bloqueo {
  flex-shrink: 0;
  color: var(--dc-estado-denegado);
}

.risk-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--dc-space-4);
  padding: var(--dc-space-4) var(--dc-space-5);
  background-color: var(--dc-estado-denegado-bg);
  border: 1.5px solid #E7B0AB;
  border-radius: var(--dc-radius-md);
}

.risk-banner__icono {
  flex-shrink: 0;
  color: var(--dc-estado-denegado);
}

.risk-banner__contenido {
  display: flex;
  flex-direction: column;
  gap: var(--dc-space-3);
}

.risk-banner__descripcion {
  font-size: var(--dc-fs-14);
  color: var(--dc-fg);
}

.dc-display {
  font-family: var(--dc-font-sans);
  font-weight: var(--dc-fw-black);
  font-size: clamp(2.5rem, 5vw + 1rem, var(--dc-fs-72));
  line-height: var(--dc-lh-tight);
  letter-spacing: var(--dc-tracking-tight);
  color: var(--dc-fg);
}

.dc-h1 {
  font-family: var(--dc-font-sans);
  font-weight: var(--dc-fw-black);
  font-size: clamp(2rem, 3vw + 1rem, var(--dc-fs-48));
  line-height: var(--dc-lh-tight);
  letter-spacing: var(--dc-tracking-tight);
}

.dc-h2 {
  font-weight: var(--dc-fw-bold);
  font-size: var(--dc-fs-36);
  line-height: var(--dc-lh-snug);
  letter-spacing: var(--dc-tracking-tight);
}

.dc-h3 {
  font-weight: var(--dc-fw-bold);
  font-size: var(--dc-fs-24);
  line-height: var(--dc-lh-snug);
}

.dc-h4 {
  font-weight: var(--dc-fw-semibold);
  font-size: var(--dc-fs-20);
  line-height: var(--dc-lh-snug);
}

.dc-eyebrow {
  font-weight: var(--dc-fw-bold);
  font-size: var(--dc-fs-12);
  text-transform: uppercase;
  letter-spacing: var(--dc-tracking-widest);
  color: var(--dc-primary);
}

.dc-lead {
  font-size: var(--dc-fs-20);
  line-height: var(--dc-lh-relaxed);
  font-weight: var(--dc-fw-light);
  color: var(--dc-fg-muted);
}

.dc-p, p.dc { font-size: var(--dc-fs-16); line-height: var(--dc-lh-relaxed); color: var(--dc-fg-muted); }
.dc-small  { font-size: var(--dc-fs-14); line-height: var(--dc-lh-normal); color: var(--dc-fg-muted); }
.dc-caption{ font-size: var(--dc-fs-12); line-height: var(--dc-lh-normal); color: var(--dc-fg-subtle); letter-spacing: var(--dc-tracking-wide); }

.dc-stat {
  font-weight: var(--dc-fw-black);
  font-size: clamp(1.875rem, 2vw + 1rem, var(--dc-fs-48));
  line-height: var(--dc-lh-tight);
  letter-spacing: var(--dc-tracking-tight);
  font-variant-numeric: tabular-nums;
}

.auth-split-page {
  margin: 0;
  background: var(--dc-primary-900);
  min-height: 100vh;
}

.auth-split {
  display: flex;
  min-height: 100vh;
}

.auth-split__panel {
  display: flex;
  flex-direction: column;
  width: 380px;
  flex: none;
  background: linear-gradient(180deg, var(--dc-primary) 0%, var(--dc-primary-700) 100%);
  padding: var(--dc-space-10) var(--dc-space-8);
  position: relative;
  overflow: hidden;
}

.auth-split__logo {
  height: 26px;
  width: auto;
  display: block;
  align-self: flex-start;
}

.auth-split__claim {
  margin-top: var(--dc-space-10);
}

.auth-split__claim-titulo {
  font-weight: var(--dc-fw-black);
  font-size: var(--dc-fs-30);
  color: var(--dc-white);
  line-height: var(--dc-lh-snug);
  letter-spacing: var(--dc-tracking-tight);
  margin: 0;
}

.auth-split__claim-texto {
  font-size: var(--dc-fs-14);
  line-height: var(--dc-lh-relaxed);
  color: rgba(255, 255, 255, 0.82);
  font-weight: var(--dc-fw-light);
  margin: var(--dc-space-4) 0 0;
}

.auth-split__lulu {
  position: absolute;
  bottom: -10px;
  right: -18px;
  width: 230px;
  height: 230px;
  object-fit: contain;
  opacity: 0.96;
}

.auth-split__formulario {
  flex: 1;
  background: var(--dc-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--dc-space-8);
}

.auth-split__tarjeta {
  width: 100%;
  max-width: 440px;
}

.auth-split__titulo {
  font-weight: var(--dc-fw-extrabold);
  font-size: var(--dc-fs-24);
  color: var(--dc-gray-900);
  letter-spacing: var(--dc-tracking-tight);
  margin: 0 0 var(--dc-space-2);
}

.auth-split__subtitulo {
  font-size: var(--dc-fs-14);
  color: var(--dc-fg-muted);
  margin: 0 0 var(--dc-space-6);
}

.auth-split__cifrada {
  display: flex;
  align-items: center;
  gap: var(--dc-space-2);
  font-size: var(--dc-fs-12);
  color: var(--dc-gray-400);
  margin: var(--dc-space-5) 0 0;
  justify-content: center;
}

.auth-split__enlace {
  font-size: var(--dc-fs-14);
  color: var(--dc-primary);
  font-weight: var(--dc-fw-semibold);
  text-decoration: none;
  display: inline-block;
  margin: var(--dc-space-3) 0;
}

.auth-split__enlace:hover {
  text-decoration: underline;
}

@media (max-width: 700px) {
  .auth-split {
    flex-direction: column;
  }

  .auth-split__panel {
    width: 100%;
    padding: var(--dc-space-6) var(--dc-space-6);
    min-height: unset;
  }

  .auth-split__lulu {
    display: none;
  }

  .auth-split__claim {
    margin-top: var(--dc-space-4);
  }

  .auth-split__claim-titulo {
    font-size: var(--dc-fs-20);
  }

  .auth-split__formulario {
    padding: var(--dc-space-6) var(--dc-space-4);
    align-items: flex-start;
  }
}

.dc-mono { font-family: var(--dc-font-mono); }

.btn--sm {
  min-height: 32px;
  padding-inline: var(--dc-space-3);
  padding-block: var(--dc-space-1);
  font-size: var(--dc-fs-12);
  gap: var(--dc-space-1);
}

.btn--success {
  background-color: var(--dc-success);
  color: var(--dc-fg-on-primary);
  border-color: var(--dc-success);
}

.btn--success:hover {
  background-color: #57973F;
  border-color: #57973F;
}

.page-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--dc-space-2);
  margin-bottom: var(--dc-space-6);
  padding-bottom: var(--dc-space-4);
  border-bottom: 1px solid var(--dc-border);
}

.page-header__titulo,
.page-titulo {
  margin: 0;
  font-size: var(--dc-fs-30);
  font-weight: var(--dc-fw-semibold);
  line-height: var(--dc-lh-snug);
  letter-spacing: var(--dc-tracking-tight);
}

.page-header__subtitulo {
  margin: 0;
  color: var(--dc-fg-muted);
  font-size: var(--dc-fs-14);
}

.page-header .btn {
  margin-top: var(--dc-space-1);
}

.page-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dc-space-3);
}

.form-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dc-space-3);
  margin-top: var(--dc-space-6);
}

.form-errors {
  margin-bottom: var(--dc-space-4);
  padding: var(--dc-space-3) var(--dc-space-4);
  border: 1px solid var(--color-error-borde);
  border-radius: var(--dc-radius-md);
  background-color: var(--dc-estado-denegado-bg);
  color: var(--dc-estado-denegado);
  font-size: var(--dc-fs-14);
}

.form-errors ul {
  margin: 0;
  padding-left: var(--dc-space-5);
}

.campo__ayuda {
  display: block;
  margin-top: var(--dc-space-1);
  color: var(--dc-fg-muted);
  font-size: var(--dc-fs-12);
}

.acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--dc-space-2);
}

#runner-survey-container,
#preview-container {
  --sjs-font-family: var(--dc-font-sans);
  --sjs-default-font-family: var(--dc-font-sans);
}

.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--dc-space-3);
  padding: var(--dc-space-3) var(--dc-space-4);
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-md);
  background-color: var(--dc-gray-100);
  font-size: var(--dc-fs-14);
  color: var(--dc-fg);
  margin-bottom: var(--dc-space-4);
}

.alert__icono {
  flex-shrink: 0;
  display: inline-flex;
  margin-top: 2px;
}

.alert__contenido {
  flex: 1;
  margin: 0;
}

.alert--info {
  background-color: var(--dc-estado-info-bg);
  border-color: #AECBE2;
}

.alert--advertencia {
  background-color: var(--dc-estado-pendiente-bg);
  border-color: #EBC79B;
}

.alert--peligro {
  background-color: var(--dc-estado-denegado-bg);
  border-color: #E7B0AB;
}

.badge--activo,
.badge--activa {
  background-color: var(--dc-estado-otorgado);
  color: var(--dc-fg-on-primary);
}

.badge--vencida,
.badge--vencido {
  background-color: var(--dc-estado-denegado);
  color: var(--dc-fg-on-primary);
}

.badge--por-vencer {
  background-color: var(--dc-estado-pendiente);
  color: var(--dc-fg-on-primary);
}

.badge--planificada,
.badge--boveda {
  background-color: var(--dc-estado-info);
  color: var(--dc-fg-on-primary);
}

.badge--neutro,
.badge--cerrada,
.badge--desactivado {
  background-color: var(--dc-gray-100);
  color: var(--dc-gray-600);
  border: 1px solid var(--dc-border);
}

.lista-items,
.lista-proyectos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--dc-space-2);
}

.lista-items__item,
.lista-proyectos__item {
  display: flex;
  align-items: center;
  gap: var(--dc-space-2);
}

.lista-items__enlace,
.lista-proyectos__enlace {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--dc-space-3);
  min-height: 44px;
  padding: var(--dc-space-3) var(--dc-space-4);
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-md);
  background-color: var(--dc-bg-elevated);
  color: var(--dc-fg);
  text-decoration: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

a.lista-items__enlace:hover,
a.lista-proyectos__enlace:hover {
  border-color: var(--dc-primary);
  background-color: var(--dc-gray-100);
}

.lista-items__enlace--sistema {
  cursor: default;
  background-color: var(--dc-gray-100);
}

.lista-items__label,
.lista-proyectos__nombre {
  flex: 1;
  font-weight: var(--dc-fw-medium);
}

.lista-items__type {
  font-family: var(--dc-font-mono);
  font-size: var(--dc-fs-12);
  color: var(--dc-fg-muted);
}

.lista-items__inactivo {
  padding: var(--dc-space-1) var(--dc-space-2);
  border-radius: var(--dc-radius-pill);
  background-color: var(--dc-gray-100);
  color: var(--dc-gray-600);
  font-size: var(--dc-fs-12);
  font-weight: var(--dc-fw-medium);
  border: 1px solid var(--dc-border);
}

.lista-proyectos__estado {
  font-size: var(--dc-fs-14);
  color: var(--dc-fg-muted);
}

.lista-proyectos__gate {
  display: inline-flex;
}

.proyecto-cabecera {
  margin-bottom: var(--dc-space-6);
  padding-bottom: var(--dc-space-4);
  border-bottom: 1px solid var(--dc-border);
}

.proyecto-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dc-space-2);
  margin-top: var(--dc-space-2);
}

.proyecto-meta__estado,
.proyecto-meta__gate,
.proyecto-meta__rol {
  display: inline-flex;
  align-items: center;
  padding: var(--dc-space-1) var(--dc-space-3);
  border-radius: var(--dc-radius-pill);
  font-size: var(--dc-fs-12);
  font-weight: var(--dc-fw-medium);
  background-color: var(--dc-gray-100);
  color: var(--dc-gray-600);
  border: 1px solid var(--dc-border);
}

.proyecto-cuerpo > p {
  margin-bottom: var(--dc-space-4);
}

.proyecto-cuerpo > .btn {
  margin-right: var(--dc-space-2);
  margin-bottom: var(--dc-space-2);
}

.compliance-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--dc-space-4);
  margin-bottom: var(--dc-space-6);
}

.compliance-kpi {
  display: flex;
  flex-direction: column;
  gap: var(--dc-space-1);
  padding: var(--dc-space-5);
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-xl);
  background-color: var(--dc-bg-elevated);
  box-shadow: var(--dc-shadow-md);
}

.compliance-kpi__numero {
  font-size: var(--dc-fs-36);
  font-weight: var(--dc-fw-bold);
  line-height: var(--dc-lh-tight);
  letter-spacing: var(--dc-tracking-tight);
  font-variant-numeric: tabular-nums;
}

.compliance-kpi__etiqueta {
  font-size: var(--dc-fs-14);
  color: var(--dc-fg-muted);
}

.compliance-section {
  margin-top: var(--dc-space-6);
}

.compliance-actions {
  margin-bottom: var(--dc-space-5);
}

.definicion,
.definiciones,
.dl-horizontal,
.compliance-dl,
.arco-detalle,
.breach-detalle {
  display: grid;
  grid-template-columns: minmax(160px, max-content) 1fr;
  gap: var(--dc-space-2) var(--dc-space-4);
  margin: 0 0 var(--dc-space-5);
}

.definicion dt,
.definiciones dt,
.dl-horizontal dt,
.compliance-dl dt,
.arco-detalle dt,
.breach-detalle dt {
  font-weight: var(--dc-fw-semibold);
  color: var(--dc-fg-muted);
  font-size: var(--dc-fs-14);
}

.definicion dd,
.definiciones dd,
.dl-horizontal dd,
.compliance-dl dd,
.arco-detalle dd,
.breach-detalle dd {
  margin: 0;
  color: var(--dc-fg);
  font-size: var(--dc-fs-14);
}

.arco-acciones,
.breach-acciones,
.acciones-pie {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dc-space-3);
  margin-top: var(--dc-space-5);
}

.arco-volver,
.breach-volver {
  margin-top: var(--dc-space-4);
}

.runner-container {
  max-width: 720px;
  margin-inline: auto;
  padding: var(--dc-space-6) var(--dc-space-4);
}

.texto-secundario {
  color: var(--dc-fg-muted);
}

.texto-ayuda {
  display: block;
  margin-top: var(--dc-space-1);
  color: var(--dc-fg-muted);
  font-size: var(--dc-fs-14);
}

.card--accion {
  padding: var(--dc-space-6);
  margin-bottom: var(--dc-space-6);
}

.token-enlace {
  display: flex;
  gap: var(--dc-space-2);
  align-items: center;
}

.token-enlace__input {
  flex: 1;
  min-height: 44px;
  padding-inline: var(--dc-space-3);
  border: 1.5px solid var(--dc-gray-500);
  border-radius: var(--dc-radius-md);
  font-family: var(--dc-font-mono);
  font-size: var(--dc-fs-14);
  background-color: var(--dc-bg-elevated);
  color: var(--dc-fg);
}

.export-descarga {
  display: flex;
  flex-direction: column;
  gap: var(--dc-space-2);
  margin-top: var(--dc-space-4);
}

.boveda-info,
.nota-roles {
  margin-top: var(--dc-space-6);
}

.seccion-tramo,
.seccion-registros,
.seccion-instrumentos {
  margin-bottom: var(--dc-space-5);
}

.estado-vacio,
.estado-vacio__texto {
  color: var(--dc-fg-muted);
  font-size: var(--dc-fs-14);
  padding-block: var(--dc-space-4);
}

.field-readonly {
  display: flex;
  flex-direction: column;
  gap: var(--dc-space-1);
  margin-bottom: var(--dc-space-4);
  padding: var(--dc-space-3) var(--dc-space-4);
  background-color: var(--dc-gray-100);
  border-radius: var(--dc-radius-md);
}

.field-readonly__label {
  font-size: var(--dc-fs-12);
  font-weight: var(--dc-fw-semibold);
  color: var(--dc-fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.field-readonly__value {
  font-size: var(--dc-fs-14);
  color: var(--dc-fg);
}

.items-con-badges {
  display: flex;
  flex-direction: column;
  gap: var(--dc-space-2);
  max-height: 340px;
  overflow-y: auto;
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-md);
  padding: var(--dc-space-3);
}

.items-con-badges__fila {
  display: flex;
  align-items: center;
  gap: var(--dc-space-2);
}

.campo__etiqueta--inline {
  display: inline-flex;
  align-items: center;
  gap: var(--dc-space-2);
  font-weight: var(--dc-fw-regular);
  cursor: pointer;
}

.id-corto {
  font-family: var(--dc-font-mono);
  font-size: var(--dc-fs-13);
  color: var(--dc-fg-muted);
}

.vault-identity-motivo {
  margin-top: var(--dc-space-4);
}

.org-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--dc-space-4);
  margin-top: var(--dc-space-4);
}

.org-grid__item {
  display: flex;
  flex-direction: column;
  gap: var(--dc-space-3);
  padding: var(--dc-space-5);
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-xl);
  background-color: var(--dc-bg-elevated);
  box-shadow: var(--dc-shadow-md);
}

.org-grid__nombre {
  font-size: var(--dc-fs-18);
  font-weight: var(--dc-fw-semibold);
}

.paginacion__info {
  display: inline-flex;
  align-items: center;
  padding-inline: var(--dc-space-3);
  color: var(--dc-fg-muted);
  font-size: var(--dc-fs-14);
}

.preview-surveyjs {
  margin-top: var(--dc-space-4);
}

.disenador {
  display: grid;
  grid-template-columns: minmax(280px, 320px) minmax(0, 1fr) auto;
  grid-template-areas:
    "crear  lienzo inspector"
    "paleta lienzo inspector";
  gap: var(--dc-space-5);
  align-items: start;
  margin-bottom: var(--dc-space-6);
}

.disenador--sin-inspector {
  grid-template-columns: minmax(280px, 320px) minmax(0, 1fr);
  grid-template-areas:
    "crear  lienzo"
    "paleta lienzo";
}

.creador-item-panel {
  grid-area: crear;
}

.disenador__paleta {
  grid-area: paleta;
}

.disenador__lienzo {
  grid-area: lienzo;
}

.panel-propiedades {
  grid-area: inspector;
  width: 320px;
  position: sticky;
  top: var(--dc-space-4);
}

.creador-item-panel,
.disenador__paleta,
.panel-propiedades {
  display: flex;
  flex-direction: column;
  gap: var(--dc-space-3);
  padding: var(--dc-space-5);
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-xl);
  background-color: var(--dc-bg-elevated);
  box-shadow: var(--dc-shadow-md);
}

.disenador__lienzo {
  display: flex;
  flex-direction: column;
  gap: var(--dc-space-4);
  padding: var(--dc-space-5);
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-xl);
  background-color: var(--dc-gray-100);
  min-height: 320px;
}

.compositor__titulo-seccion {
  margin: 0;
  font-size: var(--dc-fs-12);
  font-weight: var(--dc-fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--dc-gray-500);
}

.buscador-paleta {
  margin-bottom: var(--dc-space-1);
}

.compositor__lista-paleta {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--dc-space-2);
  max-height: 360px;
  overflow-y: auto;
}

.compositor__item-paleta {
  display: flex;
}

.compositor__btn-agregar {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
}

.editor-opciones {
  margin-top: var(--dc-space-2);
  padding-top: var(--dc-space-3);
  border-top: 1px solid var(--dc-border);
}

.editor-opciones-inline {
  display: flex;
  flex-direction: column;
  gap: var(--dc-space-3);
  margin-top: var(--dc-space-2);
}

.opcion-fila {
  display: flex;
  align-items: center;
  gap: var(--dc-space-2);
}

.opcion-fila .campo__control {
  flex: 1;
}

.compositor__pagina {
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-md);
  background-color: var(--dc-bg-elevated);
  overflow: hidden;
}

.compositor__encabezado-pagina {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--dc-space-3) var(--dc-space-4);
  border-bottom: 1px solid var(--dc-border);
  font-weight: var(--dc-fw-semibold);
  font-size: var(--dc-fs-14);
}

.compositor__elementos {
  list-style: none;
  margin: 0;
  padding: var(--dc-space-3);
  display: flex;
  flex-direction: column;
  gap: var(--dc-space-2);
  min-height: 48px;
}

.compositor__elemento {
  display: flex;
  align-items: center;
  gap: var(--dc-space-2);
  padding: var(--dc-space-2) var(--dc-space-3);
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-md);
  background-color: var(--dc-bg);
  cursor: grab;
}

.compositor__elemento--seleccionado {
  border-color: var(--dc-primary);
  box-shadow: var(--dc-focus-ring);
}

.compositor__elemento--vacio {
  justify-content: center;
  color: var(--dc-gray-400);
  font-size: var(--dc-fs-14);
  border-style: dashed;
  cursor: default;
}

.compositor__elemento--readonly {
  cursor: default;
}

.compositor__btn-seleccionar {
  flex: 1;
  justify-content: flex-start;
  text-align: left;
  min-height: 36px;
}

.bloque-atomico,
.fila-de-matriz {
  flex: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--dc-space-2);
  font-size: var(--dc-fs-14);
}

.fila-de-matriz {
  color: var(--dc-fg-muted);
  font-style: italic;
}

.selector-escala-matriz {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: var(--dc-primary);
  cursor: pointer;
}

.condicional-indicador {
  display: inline-flex;
  flex-direction: column;
  font-size: var(--dc-fs-12);
  color: var(--dc-estado-info);
}

.condicional-texto {
  color: var(--dc-gray-500);
  font-family: var(--dc-font-mono);
  font-size: 11px;
}

.etiqueta-tipo {
  font-family: var(--dc-font-mono);
  font-size: var(--dc-fs-13);
  color: var(--dc-fg-muted);
}

.editor-corte-respuesta,
.editor-condicional {
  padding-top: var(--dc-space-3);
  border-top: 1px solid var(--dc-border);
}

.nota-legal-corte {
  margin: var(--dc-space-2) 0 0;
  font-size: var(--dc-fs-12);
  color: var(--dc-fg-muted);
  line-height: var(--dc-lh-normal);
}

.modo-encuesta-insignia {
  margin-top: var(--dc-space-1);
}

.modo-inmutabilidad-aviso {
  margin: var(--dc-space-1) 0 0;
  font-size: var(--dc-fs-12);
  color: var(--dc-fg-muted);
}

.disenador-solo-lectura {
  max-width: 820px;
  display: flex;
  flex-direction: column;
  gap: var(--dc-space-4);
}

.disenador__lienzo--readonly {
  cursor: default;
}

.form-acciones--solo-lectura {
  margin-top: var(--dc-space-2);
}

.preview-panel {
  margin-top: var(--dc-space-6);
  padding-top: var(--dc-space-5);
  border-top: 1px solid var(--dc-border);
}

@media (max-width: 1100px) {
  .disenador {
    grid-template-columns: 1fr;
    grid-template-areas:
      "crear"
      "paleta"
      "lienzo"
      "inspector";
  }

  .panel-propiedades {
    width: auto;
    position: static;
  }
}