/* ---------- fase 4: Biblioteca (casetes), copias, restauración ---------- */
.dialog.wide { width: min(80rem, 96vw); max-height: 92vh; }
.lib-head { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: .7rem; }
.lib-head .tabs { flex: 1; margin-bottom: 0; }
.lib-head .tabs button { padding: .45rem .5rem; font-size: .8rem; }
.lib-head > .key { flex: none; }
.lib-bar { display: flex; gap: .8rem; align-items: flex-end; flex-wrap: wrap; margin-bottom: .55rem; }
.lib-bar .grow2 { flex: 1 1 18rem; min-width: 0; }
.lib-bar label { margin-top: 0; }
.lib-bar.btns { align-items: center; gap: .5rem; }
.lib-bar.btns .sep { width: .1rem; align-self: stretch; background: rgba(255,178,62,.25); margin: 0 .2rem; }
.lib-bar .marks { margin-left: auto; }
.dialog .key.small { padding: .42rem .8rem .38rem; font-size: .74rem; }
.dialog .key.bad { color: #ffc9c0; }
.srcline { margin: .2rem 0 .7rem; }
.dialog .empty { color: var(--cream-dim); font-style: italic; }

/* rejilla de casetes: 8 por fila = 2 bancos (A–D) por fila */
.tapes { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: .55rem; }
.tape { position: relative; border-radius: .32rem; border: .08rem solid #050403; padding: .22rem .26rem .26rem; min-width: 0;
  background: linear-gradient(180deg, #4a443b 0%, #2c2822 14%, #1f1c18 100%); box-shadow: 0 .25rem .5rem rgba(0,0,0,.55), inset 0 .06rem 0 rgba(255,255,255,.14); }
.tape::before, .tape::after { content: ''; position: absolute; top: .22rem; width: .26rem; height: .26rem; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #9b9588, #3c3830); }
.tape::before { left: .18rem; } .tape::after { right: .18rem; }
.tape:hover { border-color: var(--amber-dim); }
.tape.marked { outline: .16rem solid var(--amber); outline-offset: -.1rem; background: linear-gradient(180deg, #5a4520 0%, #3a2c14 14%, #261d0e 100%); }
.tape .face { display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; color: inherit; }
.tape .face:disabled { cursor: not-allowed; }
.tape .paper { display: flex; align-items: baseline; gap: .35rem; padding: .22rem .3rem .2rem .55rem; margin-top: .18rem; border-radius: .14rem; border-top: .2rem solid #a8321f;
  background: linear-gradient(180deg, #f0e4c6, #d9c9a3); color: #2a1c0e; box-shadow: inset 0 -.05rem .1rem rgba(0,0,0,.25); }
.tape .no { font: 700 .74rem var(--f-label); letter-spacing: .04em; color: #8a1f12; flex: none; }
.tape .nm { font: 600 .86rem var(--f-label); letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tape .amp { display: block; min-height: 1.05em; margin: .2rem .15rem 0; font-size: .74rem; line-height: 1.05; color: var(--cream-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tape .win { position: relative; display: block; height: 1.05rem; margin: .22rem .1rem 0; border-radius: .55rem; background: linear-gradient(180deg, #0a0908, #1a1815); border: .06rem solid #3a3633; }
.tape .reel { position: absolute; top: 50%; width: .62rem; height: .62rem; margin-top: -.31rem; border-radius: 50%;
  background: radial-gradient(circle, #14120f 0 .1rem, transparent .11rem), conic-gradient(#d8cdb6 0 20%, #6e6657 0 33%, #d8cdb6 0 53%, #6e6657 0 66%, #d8cdb6 0 86%, #6e6657 0); }
.tape .reel:nth-child(1) { left: 22%; } .tape .reel:nth-child(2) { right: 22%; }
.tape .irtag { position: absolute; right: .25rem; top: -.55rem; padding: 0 .3rem; font: 700 .58rem var(--f-label); font-style: normal; letter-spacing: .1em; border-radius: 1rem; background: #1f4d2a; color: #9af0a8; border: .05rem solid #3f9b55; }
.tape > input[type="checkbox"] { position: absolute; right: .3rem; top: .32rem; z-index: 2; width: .95rem; height: .95rem; margin: 0; accent-color: #e6962e; cursor: pointer; }
.tape.blank .nm, .tape.nodata .nm { color: #7d6d52; font-style: italic; }
.tape.blank .paper, .tape.nodata .paper { background: linear-gradient(180deg, #b9ad92, #a39878); }
.tape.nodata { opacity: .55; }

/* listas de copias y recetas */
.list { display: flex; flex-direction: column; gap: .5rem; }
.row-item { display: flex; align-items: center; gap: 1rem; padding: .6rem .8rem; border-radius: .4rem; border: .08rem solid #050403; background: linear-gradient(180deg, #2c2a28, #1d1b1a); box-shadow: inset 0 .06rem 0 rgba(255,255,255,.1); }
.row-item.cur { outline: .14rem solid var(--amber); outline-offset: -.14rem; }
.row-item.fresh { border-color: rgba(255,178,62,.6); background: linear-gradient(180deg, #3a2f18, #241c0d); }
.row-item .what { flex: 1; min-width: 0; }
.row-item .what b { display: block; font: 600 1.05rem var(--f-label); letter-spacing: .03em; color: #fff3d8; }
.row-item .what small { display: block; margin-top: .12rem; color: var(--cream-dim); font-size: .86rem; line-height: 1.2; }
.row-item .what small.snip { color: #cdbd98; font-style: italic; }
.row-item .acts { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: flex-end; max-width: 28rem; }

/* restauración: tabla de lo que se pisa y resumen */
.tablewrap { max-height: 22rem; overflow: auto; margin: .6rem 0; border: .08rem solid #3a3633; border-radius: .3rem; background: #0e0d0c; scrollbar-width: thin; scrollbar-color: #5a554c #1a1918; }
.restoretable { width: 100%; border-collapse: collapse; font-size: .95rem; }
.restoretable th { position: sticky; top: 0; z-index: 1; padding: .35rem .6rem; text-align: left; font: 500 .7rem var(--f-label); letter-spacing: .14em; text-transform: uppercase; color: var(--cream-dim); background: #1f1d1b; }
.restoretable td { padding: .3rem .6rem; border-top: .06rem solid #262321; vertical-align: top; }
.restoretable td.sl { width: 3.6rem; font: 600 .95rem var(--f-label); color: var(--amber); }
.restoretable td.arr { width: 1.6rem; color: var(--amber-dim); text-align: center; }
.restoretable td.to { color: #ffe0a0; }
.restoretable.sum td.ac { width: 6.5rem; text-align: right; }
.restoretable .good { color: var(--good); }
.restoretable .bad { color: #ff9c8d; }
.restoretable .why { margin-top: .15rem; color: var(--cream-dim); font-size: .84rem; line-height: 1.2; }
.restoretable tr.failrow { background: rgba(255,107,87,.06); }
.dialog .ok b, .dialog .warnbox b { color: #ffe7b8; }

@media (max-width: 880px) {
  .tapes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .row-item { flex-direction: column; align-items: stretch; }
  .row-item .acts { justify-content: flex-start; max-width: none; }
  .lib-head { flex-direction: column; }
}