/* TASK-053 — Marcas por pasos y secciones, contenido, ideas y tendencias, calendario.
   Usa los tokens de app.css (--vt-*, --st-*, --space-*, --radius-*). Mobile primero (360 px) hasta 1920 px.
   Sin estilos inline (CSP): los colores dinámicos de la vista previa van como atributos `fill` del SVG. */

/* ------------------------------------------------------------------ formularios */

.field-optional {
  font-weight: 500;
  color: var(--muted);
  font-size: var(--text-xs);
}

textarea[aria-invalid="true"],
select[aria-invalid="true"] {
  border-color: var(--danger);
  background: #fffafa;
}

.field .field-error {
  margin: 0.3rem 0 0;
  font-weight: 600;
}

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

.color-pair input[type="color"] {
  inline-size: 3rem;
  block-size: 2.5rem;
  padding: 0.15rem;
  flex: 0 0 auto;
  cursor: pointer;
}

.color-pair .hex-input {
  inline-size: 7.5rem;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  text-transform: uppercase;
}

.callout {
  border-inline-start: 4px solid var(--vt-teal);
  background: var(--vt-primary-soft);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  margin-top: var(--space-4);
}

.callout p {
  margin: 0;
}

.callout.warning {
  border-inline-start-color: var(--st-pending-bar);
  background: var(--st-pending-bg);
}

.rules-safety > legend::after {
  content: " · límites";
  font-weight: 500;
  color: var(--muted);
}

/* ------------------------------------------------------------------ pestañas (secciones y estados) */

.tabs {
  margin: 0 0 var(--space-4);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: thin;
}

.tabs ul {
  display: flex;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: max-content;
}

.tabs a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0.5rem 0.85rem;
  border-bottom: 3px solid transparent;
  color: var(--text-2);
  font-weight: 600;
  font-size: var(--text-sm);
  text-decoration: none;
  white-space: nowrap;
}

.tabs a:hover {
  color: var(--vt-primary-dark);
  background: var(--surface-2);
}

.tabs a[aria-current="page"] {
  color: var(--vt-teal-ink);
  border-bottom-color: var(--vt-teal);
}

.tab-count {
  min-width: 1.5rem;
  padding: 0 0.4rem;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  color: var(--text-2);
  font-size: var(--text-xs);
  text-align: center;
}

.tabs a[aria-current="page"] .tab-count {
  background: var(--vt-primary-soft);
  color: var(--vt-teal-ink);
}

/* ------------------------------------------------------------------ asistente de marca */

.wizard {
  display: grid;
  gap: var(--space-4);
}

/* Los ítems de grid no se achican por debajo de su contenido (min-width: auto): la tira de pasos desbordaría. */
.wizard > *,
.wizard-split > *,
.identity-layout > *,
.content-detail > * {
  min-width: 0;
}

.wizard-steps {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow);
  align-self: start;
}

.wizard-count {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-2);
}

.wizard-progress {
  display: block;
  inline-size: 100%;
  block-size: 6px;
  margin-bottom: var(--space-3);
  appearance: none;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  overflow: hidden;
  accent-color: var(--vt-teal);
}

.wizard-progress::-webkit-progress-bar {
  background: var(--surface-3);
}

.wizard-progress::-webkit-progress-value {
  background: var(--vt-teal);
}

.wizard-progress::-moz-progress-bar {
  background: var(--vt-teal);
}

.wizard-steps ol {
  display: flex;
  justify-content: space-between;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
}

.wizard-step a,
.wizard-step > span {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
  color: var(--text-2);
  text-decoration: none;
  font-size: var(--text-sm);
}

.wizard-step a:hover {
  background: var(--vt-primary-soft);
}

.wizard-num {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  background: var(--surface);
  font-weight: 700;
  font-size: var(--text-xs);
}

.wizard-step.is-done .wizard-num {
  border-color: var(--vt-primary);
  background: var(--vt-primary);
  color: #fff;
}

.wizard-step.is-current .wizard-num {
  border-color: var(--vt-teal);
  background: var(--vt-navy);
  color: #fff;
}

.wizard-step.is-current > span {
  font-weight: 700;
  color: var(--heading);
}

/* Móvil: solo números (la etiqueta del paso actual está en «Paso N de 7»). */
.wizard-label {
  display: none;
}


.wizard-actions {
  align-items: center;
}

.wizard-split,
.identity-layout {
  display: grid;
  gap: var(--space-4);
}

.wizard-finish .actions {
  margin-block: var(--space-4);
}

.checklist {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

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

.checklist li::before {
  content: "";
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  inline-size: 1.1rem;
  block-size: 1.1rem;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
}

.checklist li.is-done::before {
  border-color: var(--vt-primary);
  background: var(--vt-primary);
  content: "✓";
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
}

.network-list {
  display: grid;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
}

.network-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border);
}

.logo-current img {
  max-inline-size: 160px;
  block-size: auto;
  object-fit: contain;
}

/* ------------------------------------------------------------------ vista previa de colores */

.brand-preview {
  margin: 0 0 var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  box-shadow: var(--shadow);
}

.brand-preview svg {
  display: block;
  inline-size: 100%;
  max-inline-size: 320px;
  block-size: auto;
  margin-inline: auto;
}

.brand-preview figcaption {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  text-align: center;
}

/* ------------------------------------------------------------------ detalle de marca */

.page-head-side {
  display: grid;
  gap: var(--space-2);
  justify-items: start;
}

.completeness-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
}

.completeness-head h2 {
  margin: 0;
}

.completeness progress {
  inline-size: min(100%, 280px);
  block-size: 10px;
  appearance: none;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  overflow: hidden;
  accent-color: var(--vt-teal);
}

.completeness progress::-webkit-progress-bar {
  background: var(--surface-3);
}

.completeness progress::-webkit-progress-value {
  background: var(--vt-teal);
}

.completeness progress::-moz-progress-bar {
  background: var(--vt-teal);
}

.completeness p {
  margin: var(--space-2) 0 0;
}

.empty-state {
  padding: var(--space-6) var(--space-4);
  text-align: center;
}

.empty-state .empty-title {
  margin: 0 0 var(--space-1);
  font-weight: 700;
  color: var(--heading);
}

/* ------------------------------------------------------------------ contenido */

.content-detail {
  display: grid;
  gap: var(--space-4);
}

.decision-panel .actions-stack {
  display: grid;
  gap: var(--space-4);
}

.decision-panel form + form {
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

.command-examples {
  margin: var(--space-2) 0 0;
  padding-left: 1.1rem;
  font-size: var(--text-sm);
  color: var(--text-2);
}

.command-examples code {
  font-family: inherit;
  font-weight: 600;
  background: var(--surface-3);
  border-radius: var(--radius-xs);
  padding: 0 0.3rem;
}

.failed-panel {
  border-inline-start: 4px solid var(--st-failed-bar);
}

.failed-panel .actions {
  margin-top: var(--space-3);
}

.tech-detail {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
}

.tech-detail pre {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: var(--text-xs);
  background: var(--surface-2);
  padding: var(--space-2);
  border-radius: var(--radius-xs);
}

.list-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--space-3);
}

.list-toolbar .field {
  min-inline-size: 10rem;
  flex: 1 1 10rem;
  margin: 0;
}

/* ------------------------------------------------------------------ ideas y tendencias */

.flow-steps {
  display: grid;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
  counter-reset: flow;
}

.flow-steps li {
  counter-increment: flow;
  display: flex;
  gap: var(--space-2);
  align-items: baseline;
  font-size: var(--text-sm);
  color: var(--text-2);
}

.flow-steps li::before {
  content: counter(flow);
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  inline-size: 1.4rem;
  block-size: 1.4rem;
  border-radius: 50%;
  background: var(--vt-primary-soft);
  color: var(--vt-teal-ink);
  font-weight: 700;
  font-size: var(--text-xs);
}

.flow-steps strong {
  color: var(--heading);
}

.run-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
}

details.sources-panel > summary {
  font-size: var(--text-lg);
}

/* ------------------------------------------------------------------ calendario */

.view-switch {
  display: inline-flex;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.view-switch a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0.3rem 0.8rem;
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  color: var(--vt-link);
  background: var(--surface);
}

.view-switch a[aria-current="page"] {
  background: var(--vt-navy);
  color: #fff;
}

.day-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.agenda-day + .agenda-day {
  margin-top: var(--space-4);
}

/* ------------------------------------------------------------------ anuncios */

.explain-grid {
  display: grid;
  gap: var(--space-3);
}

.explain-grid > div {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
}

.explain-grid h2 {
  margin: 0 0 var(--space-1);
  font-size: var(--text-md);
}

.explain-grid p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-2);
}

/* ------------------------------------------------------------------ escritorio */

@media (min-width: 700px) {
  .explain-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-head-side {
    justify-items: end;
  }
}

@media (min-width: 1000px) {
  .wizard {
    grid-template-columns: 15rem minmax(0, 1fr);
    align-items: start;
  }

  .wizard-steps {
    position: sticky;
    top: var(--space-4);
  }

  .wizard-steps ol {
    flex-direction: column;
    overflow: visible;
  }

  .wizard-label {
    display: inline;
  }

  .wizard-split,
  .identity-layout {
    grid-template-columns: minmax(0, 1fr) 20rem;
    align-items: start;
  }

  .wizard-aside,
  .identity-aside {
    position: sticky;
    top: var(--space-4);
  }

  .content-detail {
    grid-template-columns: minmax(0, 3fr) minmax(19rem, 2fr);
    align-items: start;
  }

  .content-detail .decision-col {
    position: sticky;
    top: var(--space-4);
  }
}

@media (min-width: 1400px) {
  .content-detail {
    grid-template-columns: minmax(0, 3fr) minmax(22rem, 2fr);
  }
}

/* `hidden` gana sobre el display de .btn/.field (screens.js oculta el botón de respaldo de los filtros). */
[data-autofilter-submit][hidden],
.hex-input[hidden] {
  display: none !important;
}

/* Tablas anchas (Publicaciones, Anuncios Meta…) en tableta y escritorio angosto (700–1100 px, con el menú
   lateral visible): se desplazan dentro de su tarjeta, nunca la página. Debajo de 700 px ya son tarjetas. */
@media (min-width: 700px) {
  .card:has(.table) {
    overflow-x: auto;
  }
}

/* ------------------------------------------------------------------ TASK-055: nuevo video por plantilla */

.vnew {
  display: grid;
  gap: var(--space-4);
}

.vnew-form {
  display: grid;
  gap: var(--space-4);
}

.vnew-step-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--heading);
}

.vnew-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  border-radius: var(--radius-pill);
  background: var(--vt-navy);
  color: #fff;
  font-size: var(--text-sm);
  font-weight: 800;
  flex: 0 0 auto;
}

.vnew-step .form-grid form.field {
  margin: 0;
}

.vnew-step .form-grid form.field .btn {
  margin-top: var(--space-2);
  justify-self: start;
}

.tpl-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  margin-top: var(--space-3);
}

.tpl-card {
  position: relative;
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-3);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  cursor: pointer;
  transition:
    border-color var(--ease),
    box-shadow var(--ease),
    background var(--ease);
}

.tpl-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow);
}

.tpl-card input {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  inline-size: 18px;
  block-size: 18px;
  margin: 0;
}

.tpl-card:has(input:checked) {
  border-color: var(--vt-primary);
  background: #f3fbfb;
  box-shadow: 0 0 0 3px rgba(0, 127, 128, 0.14);
}

.tpl-card:has(input:focus-visible) {
  outline: 3px solid var(--vt-focus);
  outline-offset: 2px;
}

.tpl-card.is-off {
  cursor: not-allowed;
  opacity: 0.62;
}

.tpl-thumb {
  display: block;
  inline-size: 5.5rem;
  block-size: auto;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--vt-navy);
  box-shadow: var(--shadow-sm);
}

.tpl-thumb-auto {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 50% 30%, rgba(3, 173, 174, 0.45), rgba(3, 173, 174, 0) 70%),
    var(--vt-navy);
  color: var(--vt-teal-light);
  font-weight: 800;
  font-size: 1.4rem;
  letter-spacing: 0.04em;
}

.tpl-body {
  display: grid;
  gap: 0.3rem;
  padding-right: 1.6rem;
  min-inline-size: 0;
}

.tpl-name {
  font-weight: 800;
  color: var(--heading);
}

.tpl-desc {
  font-size: var(--text-sm);
  color: var(--text-2);
}

.tpl-meta,
.tpl-off {
  font-size: var(--text-xs);
  color: var(--muted);
}

.tpl-off {
  font-weight: 700;
  color: var(--warning);
}

.ideas {
  margin-bottom: var(--space-5);
}

.ideas-title {
  margin: 0 0 var(--space-3);
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--heading);
}

.ideas-list {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.idea-card {
  display: grid;
  gap: 0.35rem;
  align-content: start;
  padding: var(--space-3) var(--space-4);
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
}

.idea-card.is-used {
  border-style: solid;
  border-color: var(--vt-primary);
  background: #f3fbfb;
}

.idea-source {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--vt-teal-ink);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.idea-title {
  font-weight: 800;
  color: var(--heading);
}

.idea-prompt {
  font-size: var(--text-sm);
  color: var(--text-2);
}

.idea-card .btn {
  justify-self: start;
  margin-top: var(--space-2);
}

.estimate {
  margin-top: var(--space-5);
}

.estimate-table {
  max-inline-size: 44rem;
}

/* TASK-058 — interruptor (checkbox con role=switch) y selector de voz con «Escuchar». */
.field .switch,
.switch {
  display: inline-flex;
  position: relative;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  font-weight: 600;
  color: var(--heading);
}

.switch input[type="checkbox"] {
  position: absolute;
  inset-inline-start: 0;
  opacity: 0;
  inline-size: 1px;
  block-size: 1px;
  margin: 0;
}

.switch-track {
  position: relative;
  display: inline-block;
  flex: none;
  inline-size: 2.75rem;
  block-size: 1.5rem;
  border-radius: 999px;
  background: var(--border-strong);
  transition: background-color 0.15s ease;
}

.switch-track::after {
  content: "";
  position: absolute;
  inset-block-start: 0.1875rem;
  inset-inline-start: 0.1875rem;
  inline-size: 1.125rem;
  block-size: 1.125rem;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.25);
  transition: transform 0.15s ease;
}

.switch input:checked + .switch-track {
  background: var(--vt-primary);
}

.switch input:checked + .switch-track::after {
  transform: translateX(1.25rem);
}

.switch input:focus-visible + .switch-track {
  outline: 3px solid var(--vt-focus);
  outline-offset: 2px;
}

/* TASK-059 — selector de fondo (control segmentado de app.css) */
.bg-pick {
  margin-top: var(--space-4);
}

.bg-pick .label {
  display: block;
  margin-bottom: var(--space-2);
  font-weight: 600;
  color: var(--heading);
}

.bg-pick .segmented {
  flex-wrap: wrap;
  max-inline-size: 100%;
}

.bg-pick .segmented label {
  white-space: normal;
}

@media (max-width: 480px) {
  .bg-pick .segmented {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-md, 12px);
  }

  .bg-pick .segmented label {
    justify-content: center;
    border-radius: var(--radius-sm, 8px);
  }
}

.segmented input:disabled + label {
  opacity: 0.55;
  cursor: not-allowed;
}

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

.voice-pick select {
  flex: 1 1 auto;
  min-inline-size: 0;
}

.voice-pick .btn {
  flex: none;
}

.voice-status:empty {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .switch-track,
  .switch-track::after {
    transition: none;
  }
}

@media (min-width: 720px) {
  .tpl-grid {
    grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
  }

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

  .tpl-card .tpl-thumb {
    inline-size: 100%;
    aspect-ratio: 4 / 5;
    object-position: 50% 30%;
  }

  .tpl-card input {
    top: calc(var(--space-3) + 0.5rem);
    right: calc(var(--space-3) + 0.5rem);
    z-index: 1;
  }
}

/* ------------------------------------------------------------------ TASK-063: Integraciones / API Keys */

.int-stats .stat.int-stat-ok::before {
  background: var(--tone-success-bar);
}

.int-stats .stat.int-stat-attention::before {
  background: var(--tone-warning-bar);
}

.int-stats .stat.int-stat-missing::before {
  background: var(--tone-danger-bar);
}

.int-stats .stat.int-stat-optional::before {
  background: var(--tone-neutral-bar);
}

.int-impact-list {
  margin: var(--space-2) 0 0;
  padding-inline-start: 1.1rem;
  display: grid;
  gap: var(--space-2);
}

.int-impact-list .badge {
  vertical-align: 0.05em;
}

/* Estados de servicio, credencial y riesgo: pares fondo/texto de los tonos (>= 4.5:1). */
.badge.int-st-ok,
.badge.int-cred-success,
.badge.int-probe-ok {
  background: var(--tone-success-bg);
  color: var(--tone-success-fg);
}

.badge.int-st-attention,
.badge.int-risk-warning {
  background: var(--tone-warning-bg);
  color: var(--tone-warning-fg);
}

.badge.int-st-missing,
.badge.int-st-broken,
.badge.int-cred-danger,
.badge.int-probe-bad {
  background: var(--tone-danger-bg);
  color: var(--tone-danger-fg);
}

.badge.int-cred-info,
.badge.int-risk-info {
  background: var(--tone-info-bg);
  color: var(--tone-info-fg);
}

.badge.int-st-optional,
.badge.int-cred-neutral {
  background: var(--tone-neutral-bg);
  color: var(--tone-neutral-fg);
}

.badge[class*=" int-"]::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.int-env {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: var(--text-xs);
  color: var(--muted);
  background: var(--surface-3);
  border-radius: var(--radius-xs);
  padding: 0.05rem 0.35rem;
  overflow-wrap: anywhere;
}

/* Modos de operación */
.int-modes {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
}

.int-mode {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-2);
  min-width: 0;
}

.int-mode-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.int-mode-label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.int-mode-value {
  margin: var(--space-1) 0 0;
  font-weight: 700;
  color: var(--heading);
}

.int-mode .help {
  margin: var(--space-1) 0 var(--space-2);
}

/* Navegación */
.int-nav {
  margin: var(--space-6) 0 var(--space-2);
}

.int-jump {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
}

.int-section {
  scroll-margin-top: var(--space-4);
  margin-top: var(--space-6);
}

/* Tarjetas por servicio */
.int-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1100px) {
  .int-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}

.int-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-inline-start: 4px solid var(--tone-neutral-bar);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4) var(--space-5);
  min-width: 0;
  scroll-margin-top: var(--space-4);
}

.int-card.is-ok {
  border-inline-start-color: var(--tone-success-bar);
}

.int-card.is-attention {
  border-inline-start-color: var(--tone-warning-bar);
}

.int-card.is-missing,
.int-card.is-broken {
  border-inline-start-color: var(--tone-danger-bar);
}

.int-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.int-card-head h3 {
  margin: 0;
  font-size: 1.05rem;
}

.int-purpose {
  margin: var(--space-1) 0 var(--space-3);
  color: var(--text-2);
}

.int-subtitle {
  margin: 0 0 var(--space-1);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.int-uses ul {
  margin: 0 0 var(--space-3);
  padding-inline-start: 1.1rem;
  font-size: var(--text-sm);
}

.int-ifmissing {
  font-size: var(--text-sm);
  margin: 0 0 var(--space-3);
  color: var(--text-2);
}

.int-note {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
}

.int-note svg {
  width: 18px;
  height: 18px;
  flex: none;
}

.int-creds {
  margin: 0 0 var(--space-3);
  display: grid;
  gap: var(--space-2);
  border-top: 1px solid var(--border);
  padding-top: var(--space-3);
}

.int-cred dt {
  font-weight: 700;
  font-size: var(--text-sm);
}

.int-cred dd {
  margin: 0.15rem 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.6rem;
  font-size: var(--text-sm);
}

.int-last4 {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: var(--text-xs);
}

.int-health,
.int-probe {
  font-size: var(--text-sm);
  margin: 0 0 var(--space-3);
}

.int-health {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  color: var(--text-2);
}

.int-error-text {
  flex-basis: 100%;
  color: var(--tone-danger-fg);
  font-weight: 600;
}

.int-probe-line {
  margin: 0;
}

.int-perms {
  list-style: none;
  margin: var(--space-2) 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
}

.int-perms li {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.int-perm-ok,
.int-perm-missing,
.int-perm-unknown {
  font-size: var(--text-xs);
  font-weight: 700;
  padding: 0.05rem 0.45rem;
  border-radius: var(--radius-pill);
}

.int-perm-ok {
  background: var(--tone-success-bg);
  color: var(--tone-success-fg);
}

.int-perm-missing {
  background: var(--tone-danger-bg);
  color: var(--tone-danger-fg);
}

.int-perm-unknown {
  background: var(--tone-neutral-bg);
  color: var(--tone-neutral-fg);
}

.int-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin: 0 0 var(--space-2);
}

.int-actions form {
  margin: 0;
}

.int-actions .btn svg {
  width: 16px;
  height: 16px;
}

.int-card > .help {
  margin: 0 0 var(--space-3);
}

.int-config {
  margin: var(--space-2) 0 0;
}

.int-form {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: minmax(0, 1fr);
  margin-bottom: var(--space-3);
}

@media (min-width: 600px) {
  .int-form {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }

  .int-form .actions {
    padding-top: 1.7rem;
  }
}

.int-remove {
  margin: -0.25rem 0 var(--space-4);
}

.int-outside {
  margin-top: var(--space-6);
}

.int-outside-list {
  margin: 0 0 var(--space-3);
  padding-inline-start: 1.1rem;
  display: grid;
  gap: var(--space-2);
  font-size: var(--text-sm);
}