/* ============================================================
   Carrusel por red · el bloque de #cr-redes en el paso "Exportar"

   Va ANTES de base.css, como todos los .css de apartado: base.css gana los empates.
   ============================================================ */

#cr-redes{ margin-top: var(--sp-6); }
#cr-redes h4{
  margin: 0 0 var(--sp-2); font: 600 var(--fs-sm)/1.2 var(--f-mono);
}

.crd-intro{
  margin: 0 0 var(--sp-4); color: var(--ink-2); font-size: var(--fs-xs);
  max-width: 70ch;
}

.crd-lista{ display: flex; flex-direction: column; gap: var(--sp-2); }
/* Mientras se renderiza, la lista entera queda inerte: los botones de las otras redes
   dispararían un segundo render sobre la misma pieza. */
.crd-lista.ocupado{ opacity: .55; pointer-events: none; }

.crd-red{
  background: var(--s1); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-2);
}
/* El borde de aviso se gasta solo acá: es la única señal de que algo de esta pieza no puede
   salir en esa red. Ámbar y no rojo — no está roto, hay que decidir algo. */
.crd-red.con-problema{ border-color: var(--dorado, #E0A93B); }

.crd-cabeza{ display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.crd-nombre{ font: 600 var(--fs-sm)/1.2 var(--f-mono); }

.crd-chip{
  font: 600 var(--fs-micro)/1 var(--f-mono); letter-spacing: .04em;
  padding: var(--sp-1) var(--sp-2); border-radius: var(--r-sm);
  white-space: nowrap;
}
.crd-chip.es-madre{ background: var(--s3); color: var(--ink-3); }
.crd-chip.es-variante{ background: var(--turquesa-dim); color: var(--turquesa-ink); }
.crd-chip.apagada{ background: var(--s3); color: var(--ink-3); opacity: .8; }

.crd-problema{
  margin: 0; padding: var(--sp-2) var(--sp-3);
  background: var(--s2); border-radius: var(--r-sm);
  font-size: var(--fs-xs); color: var(--ink-2);
}
.crd-problema p{ margin: 0; }
.crd-quehacer{ margin-top: var(--sp-1) !important; color: var(--ink-3); }
.crd-nota{
  margin: 0; font-size: var(--fs-micro); color: var(--ink-3); font-style: italic;
}
.crd-fallo{
  padding: var(--sp-3); background: var(--s2); border-radius: var(--r-sm);
  font-size: var(--fs-xs); color: var(--ink-2); margin-bottom: var(--sp-2);
}

/* ---------- el editor ---------- */

.crd-editor{
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding-top: var(--sp-3); border-top: 1px solid var(--line);
}
.crd-editor-intro{ margin: 0; font-size: var(--fs-micro); color: var(--ink-3); max-width: 70ch; }
.crd-campo{ display: flex; flex-direction: column; gap: var(--sp-1); }
.crd-campo > span{
  font: 600 var(--fs-micro)/1.2 var(--f-mono); color: var(--ink-3);
  letter-spacing: .04em;
}
.crd-campo select,
.crd-campo input,
.crd-campo textarea{ width: 100%; font-size: var(--fs-xs); }
.crd-campo textarea{ resize: vertical; min-height: 3.2em; }

.crd-barra{ display: flex; gap: var(--sp-2); align-items: center; }
/* El botón de deshacer no compite con Guardar: sin fondo y en gris. */
.crd-suave{ background: none; color: var(--ink-3); }
.crd-suave:hover{ color: var(--ink); }
.crd-aviso{ margin: 0; font-size: var(--fs-micro); color: var(--rojo-ink); }
.crd-aviso:empty{ display: none; }