/* Agente · lectura de un resumen y páginas */

/* ---------- barra superior del detalle ---------- */
.barra-det { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 2px; padding: calc(6px + var(--sa-t)) 8px 6px; background: color-mix(in srgb, var(--hoja) 88%, transparent); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); border-bottom: 1px solid var(--linea); }
.barra-det .esp { flex: 1; }
.volver { display: none; align-items: center; gap: 2px; border: 0; background: none; color: var(--acento); font-weight: 500; padding: 8px 4px; font-size: 1rem; }
@media (max-width: 899px) { .volver { display: inline-flex; } }

/* ---------- artículo: una columna pensada para leer ---------- */
.det { max-width: 700px; margin: 0 auto; padding: 22px clamp(18px, 4vw, 36px) calc(56px + var(--sa-b)); font-size: 1.02rem; line-height: 1.6; overflow-wrap: anywhere; }
.reproductor { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden; background: #000; margin-bottom: 18px; }
.reproductor img, .reproductor iframe { width: 100%; height: 100%; border: 0; display: block; object-fit: cover; }
.reproductor .play { position: absolute; inset: 0; display: grid; place-items: center; border: 0; background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, .5)); color: #fff; }
.reproductor .play span { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: rgba(0, 0, 0, .55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.reproductor .play svg { width: 26px; height: 26px; margin-left: 3px; }
.det h2 { margin: 0 0 6px; font-size: clamp(1.3rem, 2.4vw, 1.6rem); line-height: 1.25; letter-spacing: -.02em; }
.meta { display: flex; flex-wrap: wrap; gap: 2px 12px; margin: 0; color: var(--suave); font-size: .86rem; line-height: 1.5; }
.meta a { color: inherit; }

/* El veredicto decide si se mira el vídeo: va primero y destaca. */
.veredicto { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; margin: 18px 0 16px; padding: 12px 16px; border-radius: var(--r-s); }
.veredicto strong { font-size: 1.15rem; font-weight: 750; letter-spacing: -.015em; }
.veredicto span { color: var(--tinta); font-size: .95rem; }
.tldr { font-size: 1.1rem; line-height: 1.55; margin: 0 0 22px; }
.pedido { margin: 0 0 18px; padding: 9px 14px; border-left: 3px solid var(--acento); background: var(--acento-suave); border-radius: 0 var(--r-s) var(--r-s) 0; font-size: .92rem; }

.bloque { margin: 0 0 24px; }
.bloque h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: .98rem; letter-spacing: -.01em; }
.bloque h3 svg { width: 18px; height: 18px; color: var(--acento); }
.bloque ul { margin: 0; padding-left: 1.15rem; }
.bloque li { margin: 6px 0; padding-left: 2px; }
.bloque li::marker { color: var(--tenue); }
.bloque.practico { padding: 14px 16px; border-radius: var(--r-s); background: var(--ver-f); }
.bloque.practico h3 svg { color: var(--ver); }

/* conceptos: los nuevos se explican; los conocidos solo se nombran */
.conceptos-nuevos { display: grid; gap: 8px; margin: 0; }
.concepto { padding: 10px 14px; border-radius: var(--r-s); background: var(--fondo); }
.concepto dt { font-weight: 650; display: flex; align-items: center; gap: 8px; }
.concepto dt small { font-size: .7rem; font-weight: 650; color: var(--acento); background: var(--acento-suave); border-radius: 999px; padding: 0 7px; }
.concepto dd { margin: 2px 0 0; color: var(--suave); font-size: .93rem; line-height: 1.5; }
.conocidos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; font-size: .86rem; color: var(--suave); }
.conocidos button { padding: 3px 10px; border: 1px solid var(--linea); border-radius: 999px; background: var(--hoja); font-size: .84rem; color: var(--tinta); }
.conocidos button[aria-expanded="true"] { border-color: var(--acento); color: var(--acento); }
.explica-conocido { margin: 8px 0 0; padding: 9px 12px; border-radius: var(--r-s); background: var(--fondo); font-size: .9rem; color: var(--suave); }

.momentos { list-style: none; padding: 0 !important; margin: 0; }
.momentos li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: baseline; margin: 0 !important; padding: 7px 0; border-bottom: 1px solid var(--linea); font-size: .95rem; }
.momentos li:last-child { border-bottom: 0; }
.momentos button { border: 0; padding: 2px 9px; border-radius: 7px; background: var(--acento-suave); color: var(--acento); font-weight: 650; font-variant-numeric: tabular-nums; font-size: .84rem; min-width: 52px; }

/* ---------- profundizar: preguntar al agente o llevarlo a otra IA ---------- */
.profundizar { margin: 28px 0 24px; padding: 16px; border-radius: var(--r); background: var(--fondo); }
.profundizar h3 { margin: 0 0 2px; font-size: 1.02rem; }
.profundizar > p { margin: 0 0 12px; color: var(--suave); font-size: .88rem; line-height: 1.45; }
.sugerencias { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.sugerencias button { padding: 5px 11px; border: 1px dashed var(--linea); border-radius: 999px; background: var(--hoja); font-size: .83rem; color: var(--suave); text-align: left; line-height: 1.35; }
.sugerencias button:hover { border-color: var(--acento); color: var(--acento); }
.hilo { display: grid; gap: 10px; margin-bottom: 12px; }
.burbuja { max-width: 92%; padding: 10px 14px; border-radius: 14px; font-size: .95rem; line-height: 1.5; }
.burbuja.yo { justify-self: end; background: var(--acento); color: var(--sobre-acento); border-bottom-right-radius: 4px; }
.burbuja.ia { justify-self: start; background: var(--hoja); border-bottom-left-radius: 4px; box-shadow: var(--sombra); }
.burbuja.ia p { margin: 0 0 8px; } .burbuja.ia p:last-of-type { margin-bottom: 0; }
.burbuja.ia ul { margin: 0 0 8px; padding-left: 1.1rem; }
.burbuja .pie { display: flex; gap: 12px; margin-top: 8px; font-size: .78rem; color: var(--tenue); }
.burbuja .pie button { border: 0; background: none; padding: 0; color: var(--acento); font-size: .78rem; }
.burbuja.pensando { color: var(--suave); display: flex; gap: 8px; align-items: center; }
.burbuja.fallida { background: var(--saltar-f); }
.preguntar { display: flex; gap: 6px; align-items: flex-end; }
.preguntar textarea { flex: 1; min-width: 0; min-height: 44px; max-height: 160px; padding: 10px 14px; border: 1px solid var(--linea); border-radius: 22px; background: var(--hoja); font-size: 16px; line-height: 1.4; resize: none; }
.preguntar textarea:focus { border-color: var(--acento); outline: none; }
.preguntar .enviar { width: 44px; height: 44px; padding: 0; }
.otras-ia { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--linea); font-size: .85rem; color: var(--suave); }
.otras-ia span { margin-right: 2px; }
.otras-ia .btn-sec { padding: 5px 11px; font-size: .84rem; }

/* ---------- plegables del final ---------- */
details.plegable { border-top: 1px solid var(--linea); }
details.plegable summary { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; cursor: pointer; font-weight: 600; font-size: .95rem; list-style: none; }
details.plegable summary::-webkit-details-marker { display: none; }
details.plegable summary::after { content: "+"; color: var(--tenue); font-weight: 400; font-size: 1.25rem; line-height: 1; }
details.plegable[open] summary::after { content: "−"; }
.transcripcion { white-space: pre-wrap; font-size: .9rem; color: var(--suave); max-height: 60vh; overflow-y: auto; padding: 0 0 14px; }
.datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin: 0 0 14px; }
.dato { padding: 10px 12px; border-radius: var(--r-s); background: var(--fondo); min-width: 0; }
.dato dt { font-size: .76rem; color: var(--suave); }
.dato dd { margin: 2px 0 0; font-weight: 650; font-size: .95rem; }
.temas-det { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; padding: 0; list-style: none; }
.temas-det button { padding: 3px 10px; border: 1px solid var(--linea); border-radius: 999px; background: transparent; font-size: .82rem; color: var(--suave); }
.historial { list-style: none; margin: 0; padding: 0 0 14px; font-size: .85rem; }
.historial li { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 10px; padding: 3px 0; }
.historial time { color: var(--tenue); font-variant-numeric: tabular-nums; }
.historial .sistema span, .historial .panel span { color: var(--suave); }

/* ---------- vídeo en marcha o con error ---------- */
.progreso { margin: 20px 0; padding: 16px; border-radius: var(--r); background: var(--fondo); }
.pasos { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.pasos li { font-size: .7rem; color: var(--tenue); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pasos li::before { content: ""; display: block; height: 4px; border-radius: 2px; background: var(--linea); margin-bottom: 6px; }
.pasos li.hecho::before { background: var(--acento); }
.pasos li.actual { color: var(--tinta); font-weight: 650; }
.pasos li.actual::before { background: linear-gradient(90deg, var(--acento) 50%, var(--linea) 50%); }
.progreso .msg { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: .95rem; }
.fallo { margin: 20px 0; padding: 16px; border-radius: var(--r); background: var(--saltar-f); }
.fallo strong { color: var(--saltar); display: block; margin-bottom: 4px; }
.fallo .acciones, .progreso .acciones { margin-top: 12px; }
.det-vacio { display: grid; place-items: center; height: 100%; padding: 40px; text-align: center; color: var(--suave); }
.det-vacio h2 { color: var(--tinta); font-size: 1.2rem; margin: 0 0 6px; }
.det-vacio p { margin: 0; max-width: 34ch; }

/* ---------- páginas ---------- */
.pagina { max-width: 860px; margin: 0 auto; padding: calc(16px + var(--sa-t)) clamp(16px, 4vw, 36px) calc(48px + var(--sa-b)); }
.pagina-cab { display: flex; align-items: center; gap: 6px; margin-bottom: 16px; }
.pagina-cab > div { flex: 1; min-width: 0; }
.pagina-cab h1 { margin: 0; font-size: 1.6rem; font-weight: 750; letter-spacing: -.03em; line-height: 1.1; }
.pagina-cab p { margin: 3px 0 0; color: var(--suave); font-size: .88rem; }
.tarjetas-num { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin-bottom: 16px; }
.num { padding: 12px 14px; border-radius: var(--r); background: var(--hoja); box-shadow: var(--sombra); min-width: 0; }
.num dt { font-size: .78rem; color: var(--suave); }
.num dd { margin: 3px 0 0; font-size: 1.4rem; font-weight: 750; letter-spacing: -.02em; }
.agente-ahora { display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin-bottom: 16px; border-radius: var(--r); background: var(--hoja); box-shadow: var(--sombra); }
.agente-ahora > div { min-width: 0; flex: 1; }
.agente-ahora strong { display: block; }
.agente-ahora span { color: var(--suave); font-size: .9rem; }
.panel-blanco { padding: 4px; border-radius: var(--r); background: var(--hoja); box-shadow: var(--sombra); margin-bottom: 16px; }
.filas { list-style: none; margin: 0; padding: 0; }
.filas > li + li { border-top: 1px solid var(--linea); }
.fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; padding: 12px; border: 0; background: none; text-align: left; border-radius: 10px; color: inherit; }
button.fila:hover { background: var(--hundido); }
.fila .principal { min-width: 0; }
.fila .principal strong { display: block; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila .principal span { display: flex; flex-wrap: wrap; gap: 2px 10px; color: var(--suave); font-size: .8rem; }
.fila .lado { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: .78rem; color: var(--tenue); white-space: nowrap; }
.filtros-pag { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.filtros-pag .segmentos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.filtros-pag select { height: 38px; max-width: 140px; padding: 0 10px; border: 1px solid var(--linea); border-radius: var(--r-s); background: var(--hoja); color: var(--suave); font-size: .86rem; }
.seccion-pag { margin: 0 0 24px; }
.seccion-pag h2 { margin: 0 0 8px; font-size: 1.08rem; }
.seccion-pag p, .seccion-pag li { max-width: 70ch; }
.seccion-pag ol, .seccion-pag ul { padding-left: 1.2rem; }
.form-linea { display: flex; gap: 8px; flex-wrap: wrap; }
.form-linea input, .form-col input, .form-col textarea { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--linea); border-radius: var(--r-s); background: var(--hoja); font-size: 16px; }
.form-col { display: grid; gap: 8px; }
.form-col textarea { min-height: 76px; resize: vertical; }
.clave { margin-bottom: 16px; padding: 14px; border-radius: var(--r-s); background: var(--acento-suave); }
.clave code { display: block; margin: 8px 0 10px; word-break: break-all; font-size: .82rem; }
.codigo { position: relative; margin: 8px 0 14px; padding: 12px 14px; border-radius: var(--r-s); background: var(--tinta); color: var(--hoja); font: .8rem/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; word-break: break-all; }
.codigo button { position: absolute; top: 6px; right: 6px; padding: 3px 9px; border: 0; border-radius: 6px; background: rgba(255, 255, 255, .14); color: inherit; font-size: .75rem; }
.url-caja { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 12px; margin: 6px 0 12px; border-radius: var(--r-s); background: var(--hoja); box-shadow: var(--sombra); }
.url-caja code { flex: 1; min-width: 0; font-size: .86rem; word-break: break-all; }

/* diccionario */
.dicc-buscar { margin-bottom: 12px; }
.letra { margin: 18px 4px 6px; font-size: .82rem; font-weight: 700; color: var(--acento); }
.termino { padding: 12px 14px; }
.termino-cab { display: flex; align-items: flex-start; gap: 8px; }
.termino-cab strong { flex: 1; min-width: 0; font-size: 1rem; }
.termino-cab .icono-btn { width: 34px; height: 34px; margin: -6px -6px 0 0; }
.termino p { margin: 2px 0 0; color: var(--suave); font-size: .93rem; line-height: 1.5; }
.termino .aparece { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 6px; font-size: .8rem; color: var(--tenue); }
.termino .aparece a { color: var(--acento); text-decoration: none; }
.termino .form-col { margin-top: 8px; }

@media (max-width: 899px) {
  .det { padding-top: 0; }
  .det .reproductor { margin: 0 calc(-1 * clamp(18px, 4vw, 36px)) 16px; border-radius: 0; }
  .filtros-pag { flex-wrap: wrap; }
  .filtros-pag .segmentos { flex: 1 1 100%; }
}

/* canales */
.canales { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.canal { padding: 14px 16px; border-radius: var(--r); background: var(--hoja); box-shadow: var(--sombra); min-width: 0; }
.canal.pausado { opacity: .7; }
.canal-cab, .canal-res { display: flex; align-items: center; gap: 12px; min-width: 0; }
.canal-res { padding: 10px 6px; }
.canal-txt { flex: 1; min-width: 0; }
.canal-txt strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.canal-txt span { display: block; color: var(--suave); font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar { width: 44px; height: 44px; flex: none; border-radius: 50%; object-fit: cover; background: var(--hundido); }
.avatar.vacio { display: grid; place-items: center; font-weight: 700; color: var(--suave); }
.canal-ultimo { margin: 10px 0 0; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.canal-ultimo span { color: var(--suave); }
.canal-pie { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 10px; font-size: .82rem; color: var(--suave); }
.canal-pie .btn-sec { padding: 5px 12px; font-size: .84rem; }
.fallo-txt { color: var(--saltar); }
.canal-duracion { align-items: center; margin-top: 12px; font-size: .9rem; }
.canal-duracion input { width: 72px; flex: none; padding: 7px 8px; }
#res-canales:not(:empty) { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--linea); }
.form-col select { padding: 9px 10px; border: 1px solid var(--linea); border-radius: var(--r-s); background: var(--hoja); color: var(--suave); font-size: .9rem; }

/* buscador de canales y ficha */
.anadir-canal { padding: 16px; }
.anadir-canal h2, .subtitulo { margin: 0 0 10px; font-size: 1.02rem; }
.subtitulo { margin: 22px 2px 0; }
.buscar-canal .buscar { margin: 0; }
#res-canales:not(:empty) { margin-top: 12px; }
.res-canales { margin: 0 -6px; }
.canal-res { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 6px; border: 0; border-radius: 10px; background: none; text-align: left; color: inherit; }
button.canal-res:hover { background: var(--hundido); }
.canal-res > svg { color: var(--tenue); width: 18px; height: 18px; }
.canal-txt small { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; color: var(--tenue); font-size: .8rem; margin-top: 1px; }
.canal-txt strong { display: flex; align-items: center; gap: 4px; }
.verif { display: inline-grid; color: var(--suave); flex: none; }
.verif svg { width: 15px; height: 15px; }
.hint { margin: 0 0 6px; padding: 9px 12px; border-radius: var(--r-s); background: var(--leer-f); font-size: .9rem; }
.hint .enlace { font-size: inherit; font-weight: 650; }
.cargando-txt { display: flex; align-items: center; gap: 8px; color: var(--suave); font-size: .9rem; margin: 6px 0; }
.cargando-txt svg { color: var(--acento); }
.ficha-canal { display: grid; gap: 12px; margin-top: 8px; padding: 14px; border-radius: var(--r); background: var(--fondo); }
.avatar.grande { width: 60px; height: 60px; }
.ficha-canal .canal-txt strong { font-size: 1.08rem; }
.ficha-desc { margin: 0; color: var(--suave); font-size: .9rem; line-height: 1.5; white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.ficha-canal h4 { margin: 0 0 8px; font-size: .84rem; color: var(--suave); }
.ficha-videos { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ficha-videos li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; align-items: start; }
.ficha-videos .tit { font-size: .88rem; }
.ficha-videos .linea { margin-top: 2px; }
.seguir-fila { display: flex; flex-wrap: wrap; gap: 8px; }
.seguir-fila select { flex: 1 1 200px; min-width: 0; padding: 9px 10px; border: 1px solid var(--linea); border-radius: 999px; background: var(--hoja); color: var(--tinta); font-size: .9rem; }
.canal-ultimo { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 10px; align-items: center; margin-top: 12px; padding: 8px; border-radius: var(--r-s); background: var(--fondo); text-decoration: none; color: inherit; white-space: normal; }
.canal-ultimo img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; display: block; }
.canal-ultimo span { font-size: .88rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.canal-ultimo small { display: block; color: var(--suave); font-size: .74rem; }
.canal-duracion { flex-wrap: wrap; }

/* lista de canales: tarjeta entera clicable */
a.canal { display: block; text-decoration: none; color: inherit; }
a.canal:hover { box-shadow: var(--sombra-alta); }
.canal-cab > svg { color: var(--tenue); width: 18px; height: 18px; }
.config-chips { margin-top: 10px; gap: 5px; }
.config-chips .chip { padding: 2px 9px; font-size: .78rem; background: var(--fondo); border-color: transparent; }

/* ficha del canal */
.h-canal { display: flex; align-items: center; gap: 6px; font-size: 1.4rem !important; }
.h-canal .verif svg { width: 18px; height: 18px; }
.pagina-cab .avatar { width: 48px; height: 48px; }
.estado-canal { display: flex; align-items: center; gap: 10px; margin: -4px 0 16px; font-size: .9rem; color: var(--suave); }
.bloque-pag { padding: 16px; }
.bloque-pag > h2, .stats-cab h2 { margin: 0 0 12px; font-size: 1.05rem; }
.stats-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.stats-cab h2 { margin: 0; }
.stats-cab .segmentos { flex: 0 1 260px; }
.num small { display: block; margin-top: 2px; color: var(--suave); font-size: .76rem; line-height: 1.35; }
#stats-canal .tarjetas-num { margin-bottom: 12px; }
#stats-canal .num { box-shadow: none; background: var(--fondo); }
.prevision { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 8px; padding: 12px 14px; border-radius: var(--r-s); background: var(--ver-f); font-size: .93rem; }
.prevision svg { color: var(--ver); margin-top: 1px; }
.pie-stats { margin: 0; font-size: .8rem; }
.pie-stats .enlace { font-size: inherit; }
.barras-veredicto { display: flex; gap: 3px; margin-bottom: 10px; border-radius: 8px; overflow: hidden; }
.barras-veredicto .barra { min-width: 0; padding: 6px 8px; font-size: .78rem; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.config-canal { display: grid; gap: 16px; }
.config-canal fieldset { margin: 0; padding: 0; border: 0; display: grid; gap: 8px; min-width: 0; }
.config-canal legend { padding: 0; margin-bottom: 8px; font-weight: 650; font-size: .92rem; }
.config-canal fieldset.dos { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.check-fila { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--r-s); background: var(--fondo); cursor: pointer; }
.check-fila input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--acento); flex: none; }
.check-fila strong { display: block; font-weight: 600; font-size: .93rem; }
.check-fila small { display: block; color: var(--suave); font-size: .8rem; }
.campo { display: grid; gap: 4px; min-width: 0; }
.campo span { font-size: .84rem; color: var(--suave); }
.campo input, .campo select, .config-canal textarea { width: 100%; min-width: 0; padding: 9px 12px; border: 1px solid var(--linea); border-radius: var(--r-s); background: var(--hoja); font-size: 16px; }
.config-canal textarea { resize: vertical; }
.duracion { align-items: center; font-size: .92rem; }
.duracion input { width: 76px; flex: none; padding: 8px; border: 1px solid var(--linea); border-radius: var(--r-s); background: var(--hoja); font-size: 16px; }
.detectados { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.detectado { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 12px; align-items: start; }
.detectado .tit { font-size: .9rem; }

/* ajustes */
.ajuste { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-top: 1px solid var(--linea); }
.ajuste:first-of-type { border-top: 0; padding-top: 0; }
.ajuste > div { min-width: 0; }
.ajuste strong { display: block; font-weight: 600; }
.ajuste small { display: block; color: var(--suave); font-size: .82rem; line-height: 1.4; margin-top: 2px; }
.ajuste select { flex: none; max-width: 48%; padding: 8px 10px; border: 1px solid var(--linea); border-radius: var(--r-s); background: var(--hoja); font-size: .9rem; }
.interruptor { position: relative; flex: none; width: 46px; height: 28px; }
.interruptor input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; z-index: 1; }
.interruptor span { position: absolute; inset: 0; border-radius: 999px; background: var(--linea); transition: background .15s; }
.interruptor span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: var(--sombra); transition: transform .15s; }
.interruptor input:checked + span { background: var(--acento); }
.interruptor input:checked + span::after { transform: translateX(18px); }
.interruptor input:focus-visible + span { outline: 2px solid var(--acento); outline-offset: 2px; }
@media (max-width: 560px) {
  .ajuste { flex-direction: column; align-items: stretch; }
  .ajuste select { max-width: none; }
  .ajuste .interruptor { align-self: flex-start; }
  .detectado { grid-template-columns: 88px minmax(0, 1fr); gap: 10px; }
}