/* Contenido › Drive (19/10). Ver web/js/contenido-drive.js. Diseño: sesiones/2026-10-19-drive-contenido/DISENO.md §6
   (repo del agente). Peso máximo 600; sin animaciones infinitas. */
.dr-host, .cnt-pz-drive {
  --dr-line: var(--line, var(--border));
  --dr-card: var(--card, var(--bg-card));
  --dr-ink: var(--ink, var(--text));
  --dr-ink-2: var(--ink-2, var(--text-muted));
  --dr-warn: var(--warn, oklch(70% 0.15 80));
  --dr-warn-soft: var(--warn-soft, oklch(75% 0.15 80 / .18));
  --dr-bad: var(--bad, oklch(62% 0.18 25));
  --dr-go: var(--go, oklch(70% 0.14 160));
  --dr-go-soft: var(--go-soft, oklch(70% 0.14 160 / .18));
  --dr-link: var(--link, var(--accent-blue, #5aa2f5));
}

/* la franja de Piezas */
.dr-host { margin: 0 0 14px; }
.dr-franja { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; padding: 10px 14px; border: 1px solid var(--dr-line); border-radius: 10px; background: var(--dr-card); color: var(--dr-ink); font-size: 13px; }
.dr-franja.dr-autorizar, .dr-franja.dr-conectar { border-color: var(--dr-warn); background: var(--dr-warn-soft); }
.dr-franja.dr-error { border-color: var(--dr-bad); }
.dr-et { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--dr-ink-2); }
.dr-tx a, .cnt-pz-drive a:not(.cnt-tar-btn) { color: var(--dr-link); }
.dr-tenue { color: var(--dr-ink-2); }
.dr-err { color: var(--dr-bad); font-size: 12.5px; }
.dr-conectar { display: flex; gap: 8px; flex: 1 1 360px; min-width: 0; }
.dr-conectar input { flex: 1; min-width: 0; }
.dr-franja .cnt-tar-btn { text-decoration: none; }

/* el bloque de la ficha */
.dr-pieza { display: grid; gap: 12px; }
.dr-pieza > .cnt-tar-btn { justify-self: start; }
.dr-fila { display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; }
.dr-ruta { font-size: 12.5px; color: var(--dr-ink-2); overflow-wrap: anywhere; }
.dr-fila .cnt-tar-btn { text-decoration: none; }
.dr-grupo { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 6px 12px; align-items: start; padding-top: 10px; border-top: 1px solid var(--dr-line); }
.dr-grupo > b { font-size: 12px; font-weight: 600; color: var(--dr-ink-2); padding-top: 2px; }
.dr-grupo > small, .dr-grupo > .dr-listo { grid-column: 2; }
.dr-grupo > small { font-size: 12px; color: var(--dr-ink-2); }
.dr-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.dr-arch { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; align-items: center; font-size: 13px; }
.dr-arch img { grid-row: span 2; width: 64px; height: 36px; object-fit: cover; border-radius: 4px; background: var(--dr-line); }
.dr-arch .dr-ico { grid-row: span 2; color: var(--dr-ink-2); }
.dr-arch small { font-size: 11.5px; color: var(--dr-ink-2); }
.dr-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dr-crudos { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.dr-crudos .dr-arch small { display: none; }
.dr-mas { font-size: 12.5px; color: var(--dr-ink-2); align-self: center; }
.dr-listo { margin: 4px 0 0; font-size: 12.5px; padding: 6px 10px; border-radius: 8px; background: var(--dr-go-soft); color: var(--dr-ink); }
.dr-pie { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.dr-pie small { font-size: 12px; color: var(--dr-ink-2); }

@media (max-width: 760px) {
  .dr-grupo { grid-template-columns: 1fr; }
  .dr-grupo > small, .dr-grupo > .dr-listo { grid-column: 1; }
  .dr-conectar { flex-basis: 100%; }
}