/* La Libreta (historial), el detalle de la partida y «Ver partida». Diseño propio de Dominó Raíces (maqueta aprobada el 8-oct). */
:root {
  --lb-win: #2e8b57; --lb-win-soft: #e2f3e8; --lb-loss: #c4553d; --lb-loss-soft: #fbe7e1;
  --lb-line: #e3ddcf; --lb-paper: #fffdf6; --lb-rule: #c9dcea; --lb-margin: #e8a3a3; --lb-gold: #e0a92a;
  --lb-hand: Caveat, "Segoe Print", "Bradley Hand", cursive;
}

/* ---------- Filtros ---------- */
.lib-form { display: grid; gap: 10px; margin: 6px 0 12px; }
.lib-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.lib-head h2 { margin: 0; font-size: 24px; font-weight: 900; color: var(--text); }
.lib-who { color: var(--muted); font-weight: 800; font-size: 14px; }
.lib-chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.lib-chips::-webkit-scrollbar { display: none; }
.lchip { flex: none; border: 1px solid var(--lb-line); background: #fff; color: var(--text); font: 700 14px Nunito, system-ui, sans-serif; padding: 8px 13px; border-radius: 99px; cursor: pointer; }
.lchip.on { background: var(--text); color: #fff; border-color: var(--text); }
#libFav.on { background: #fff6dc; border-color: var(--lb-gold); color: #8a6100; }
.lib-find { display: flex; gap: 6px; }
.lib-find input { flex: 1; min-width: 0; font: 600 15px Nunito, system-ui, sans-serif; padding: 9px 12px; border: 1px solid var(--lb-line); border-radius: 12px; background: #fff; }
.lib-find .lchip { border-radius: 12px; }
.lib-mas summary { cursor: pointer; color: var(--muted); font-weight: 700; font-size: 13px; padding: 2px; }
.lib-mas .lib-find { margin-top: 6px; }

/* ---------- Resumen ---------- */
.lib-res { background: #fff; border: 1px solid var(--lb-line); border-radius: 18px; padding: 14px; display: grid; gap: 12px; margin-bottom: 12px; }
.lib-res-top { display: flex; align-items: center; gap: 12px; }
.lib-res-top div { flex: 1; min-width: 0; }
.lib-res-top b { display: block; font-size: 18px; font-weight: 900; }
.lib-res-top span.sub { color: var(--muted); font-size: 13px; font-weight: 700; }
.lib-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.lib-num { background: var(--bg); border-radius: 12px; padding: 8px 10px; }
.lib-num b { display: block; font-size: 22px; font-weight: 900; font-variant-numeric: tabular-nums; }
.lib-num small { color: var(--muted); font-size: 12px; font-weight: 700; }
.lib-num.racha b { color: var(--lb-win); }
.lib-curva { display: grid; gap: 4px; }
.lib-curva-h { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; color: var(--muted); }
.lib-curva-h .up { color: var(--lb-win); } .lib-curva-h .down { color: var(--lb-loss); }
.lib-curva svg { width: 100%; height: 70px; display: block; }
.lib-prog { display: grid; gap: 5px; }
.lib-prog-h { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 700; }
.lib-prog-h span { color: var(--muted); }
.lib-barra { height: 8px; border-radius: 99px; background: var(--bg); overflow: hidden; }
.lib-barra i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--teal), var(--lb-win)); }
.lib-prot { display: grid; gap: 4px; }
.lib-prot span { font-size: 12.5px; font-weight: 700; color: #4b5a63; background: var(--bg); border-radius: 10px; padding: 6px 10px; }
.lib-como { justify-self: start; border: 0; background: none; padding: 0; color: var(--teal); font: 800 13px Nunito, system-ui, sans-serif; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.lib-rangos { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.lib-rg { display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 6px; border-radius: 14px; background: var(--bg); min-width: 0; }
.lib-rg.yo { background: #e3f3f8; box-shadow: 0 0 0 2px var(--teal); }
.lib-rg b { display: block; font-weight: 900; font-size: 14px; }
.lib-rg small { color: var(--muted); font-weight: 700; font-size: 12px; }
.lib-expl h4 { margin: 4px 0 6px; font-size: 15px; font-weight: 900; }
.lib-expl ul { margin: 0 0 10px; padding-left: 18px; display: grid; gap: 6px; font-size: 14px; line-height: 1.4; }
.lib-juegos { display: flex; gap: 6px; flex-wrap: wrap; }
.lib-juegos .lchip small { color: inherit; opacity: .7; font-weight: 700; margin-left: 4px; }

/* ---------- Lista de partidas ---------- */
.lib-list { display: grid; gap: 8px; }
.lib-dia { font-size: 12px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; color: var(--muted); padding: 6px 4px 0; }
.lib-p { width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; display: grid; grid-template-columns: 6px 1fr auto; gap: 0 12px;
  background: #fff; border: 1px solid var(--lb-line); border-radius: 16px; padding: 0; overflow: hidden; }
.lib-p:hover { border-color: #cfc6ae; }
.lib-p:focus-visible, .lchip:focus-visible, .lib-sheet button:focus-visible, .vp button:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.lib-p .franja { background: var(--lb-win); }
.lib-p.perdida .franja { background: var(--lb-loss); }
.lib-p-main { padding: 10px 0; min-width: 0; display: grid; gap: 4px; }
.lib-marc { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.lib-marc b { font-size: 20px; font-weight: 900; font-variant-numeric: tabular-nums; }
.lib-res-pill { font-size: 12px; font-weight: 800; padding: 1px 8px; border-radius: 99px; background: var(--lb-win-soft); color: var(--lb-win); }
.lib-p.perdida .lib-res-pill { background: var(--lb-loss-soft); color: var(--lb-loss); }
.lib-gente { font-size: 13px; color: var(--muted); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-gente strong { color: var(--text); }
.lib-meta { display: flex; gap: 5px; flex-wrap: wrap; }
.lib-mini { font-size: 11px; font-weight: 800; color: var(--muted); border: 1px solid var(--lb-line); border-radius: 6px; padding: 0 6px; }
.lib-p-side { padding: 10px 12px 10px 0; display: grid; justify-items: end; align-content: space-between; gap: 4px; }
.lib-p-side small { color: var(--muted); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lib-delta { font-weight: 900; font-size: 15px; font-variant-numeric: tabular-nums; color: var(--lb-win); }
.lib-delta.neg { color: var(--lb-loss); }
.lib-delta.cero { color: var(--muted); font-size: 12px; }
.lib-star { color: var(--lb-gold); font-size: 15px; line-height: 1; }
.lib-vacio { text-align: center; color: var(--muted); padding: 26px 10px; background: #fff; border: 1px dashed var(--lb-line); border-radius: 16px; }

/* ---------- Detalle (hoja que sube desde abajo) ---------- */
.lib-sheet-back { position: fixed; inset: 0; z-index: 80; background: rgba(10,20,25,.45); display: flex; align-items: flex-end; justify-content: center; }
.lib-sheet { background: #fff; width: 100%; max-width: 520px; max-height: 92vh; overflow-y: auto; border-radius: 22px 22px 0 0;
  padding: 8px 16px calc(18px + env(safe-area-inset-bottom)); display: grid; gap: 14px; box-shadow: 0 -8px 24px rgba(0,0,0,.2); animation: libSube .25s ease-out; }
@keyframes libSube { from { transform: translateY(40px); opacity: .4; } }
@media (min-width: 700px) { .lib-sheet-back { align-items: center; } .lib-sheet { border-radius: 22px; } }
.lib-asa { width: 42px; height: 5px; border-radius: 99px; background: var(--lb-line); margin: 2px auto 0; border: 0; padding: 0; cursor: pointer; }
.lib-cab { display: grid; gap: 2px; }
.lib-cab .r1 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.lib-cab b { font-size: 20px; font-weight: 900; }
.lib-cab .gana { color: var(--lb-win); } .lib-cab .pierde { color: var(--lb-loss); }
.lib-cab small { color: var(--muted); font-weight: 700; font-size: 13px; }
.lib-cab small b { font-size: inherit; color: var(--text); }
.lib-parejas { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; align-items: center; }
.lib-pareja { display: grid; gap: 5px; padding: 8px 10px; border-radius: 14px; background: var(--bg); min-width: 0; }
.lib-pareja.ganadora { background: var(--lb-win-soft); }
.lib-pareja .lbl { font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); }
.lib-pareja.ganadora .lbl { color: var(--lb-win); }
.lib-jug { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 13px; min-width: 0; }
.lib-jug .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-ava { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #fff; font-size: 14px; flex: none; }
.lib-vs { font-family: var(--lb-hand); font-size: 24px; color: var(--muted); }

/* La libreta de verdad: renglones, margen rojo y números escritos a mano */
.lib-hoja { background: var(--lb-paper); border-radius: 12px; border: 1px solid var(--lb-line); overflow: hidden; position: relative;
  background-image: repeating-linear-gradient(to bottom, transparent 0 33px, var(--lb-rule) 33px 34px); }
.lib-hoja::before { content: ""; position: absolute; top: 0; bottom: 0; left: 64px; width: 1.5px; background: var(--lb-margin); }
.lib-fila { display: grid; grid-template-columns: 64px 1fr 1fr 40px; align-items: center; height: 34px; padding-right: 6px; }
.lib-fila > * { padding-left: 10px; min-width: 0; }
.lib-fila.cab { font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); }
.lib-fila .m { font-size: 12px; font-weight: 800; color: var(--muted); }
.lib-fila .n { font-family: var(--lb-hand); font-size: 26px; font-weight: 700; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lib-fila .n em { font-family: Nunito, system-ui, sans-serif; font-style: normal; font-size: 11px; font-weight: 800; color: var(--muted); margin-left: 4px; }
.lib-fila .n.cero { color: #a7b0b6; }
.lib-fila.total { border-top: 2px solid var(--text); }
.lib-fila.total .n { font-size: 30px; }
.lib-fila.total .n.win { color: var(--lb-win); text-decoration: underline 2px; text-underline-offset: 3px; }
.lib-verm { width: 30px; height: 26px; border-radius: 8px; border: 0; background: var(--teal); color: #fff; cursor: pointer; display: grid; place-items: center; padding: 0; }
.lib-verm svg { width: 12px; height: 12px; fill: currentColor; }
.lib-nota { font-size: 12px; font-weight: 700; color: var(--muted); margin: -6px 2px 0; }
.lib-mipunt { display: grid; gap: 6px; padding: 12px; border-radius: 14px; background: var(--bg); }
.lib-mipunt .r1 { display: flex; align-items: center; gap: 10px; }
.lib-mipunt .r1 div { flex: 1; min-width: 0; }
.lib-mipunt b { font-weight: 900; font-variant-numeric: tabular-nums; }
.lib-mipunt small { display: block; color: var(--muted); font-weight: 700; font-size: 12px; }
.lib-acc { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lib-btn { font: 800 15px Nunito, system-ui, sans-serif; border-radius: 12px; padding: 11px 10px; border: 1px solid var(--lb-line); background: #fff; color: var(--text); cursor: pointer; }
.lib-btn.prim { background: var(--teal); color: #fff; border-color: var(--teal); grid-column: 1 / -1; }
.lib-btn.prim:disabled { background: #b9c6cc; border-color: #b9c6cc; cursor: default; }
.lib-btn.on { border-color: var(--lb-gold); color: #8a6100; background: #fff6dc; }
.lib-pie { font-size: 12px; color: var(--muted); text-align: center; margin: 0; }

/* ---------- Ver partida ---------- */
.vp { position: fixed; inset: 0; z-index: 90; display: grid; grid-template-rows: auto 1fr auto; color: #fff; } /* el paño (clase felt-…) lo pone libreta.js */
.vp-bar { display: flex; align-items: center; gap: 8px; padding: calc(8px + env(safe-area-inset-top)) 10px 8px; background: rgba(0,0,0,.28); font-size: 13px; font-weight: 800; }
.vp-bar span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vp-x { width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(255,255,255,.14); color: #fff; font-size: 16px; cursor: pointer; }
.vp-ojo { font: 800 12px Nunito, system-ui, sans-serif; color: #fff; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); border-radius: 99px; padding: 6px 11px; cursor: pointer; white-space: nowrap; }
.vp-ojo[aria-pressed="true"] { background: #fbf7ec; color: #26473a; }
.vp-campo { position: relative; min-height: 0; }
.vp-board { position: absolute; inset: 64px 66px 96px; }
.vp-board svg { width: 100%; height: 100%; display: block; }
.vp-seat { position: absolute; display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 800; z-index: 1; }
.vp-seat.top { top: 8px; left: 50%; transform: translateX(-50%); flex-direction: column; }
.vp-seat.bottom { bottom: 8px; left: 50%; transform: translateX(-50%); flex-direction: column-reverse; max-width: 96%; }
.vp-seat.left { left: 6px; top: 50%; transform: translateY(-50%); flex-direction: column; }
.vp-seat.right { right: 6px; top: 50%; transform: translateY(-50%); flex-direction: column; }
.vp-nm { background: rgba(0,0,0,.38); padding: 3px 9px; border-radius: 99px; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.vp-seat.turno .vp-nm { background: #f2c230; color: #1d2a33; }
.vp-seat.left .vp-nm, .vp-seat.right .vp-nm { max-width: 62px; padding: 3px 6px; }
.vp-mano { display: flex; gap: 2px; flex-wrap: nowrap; }
.vp-seat.left .vp-mano, .vp-seat.right .vp-mano { flex-direction: column; }
.vp-mano .back { width: 9px; height: 17px; border-radius: 2px; background: #fbf7ec; box-shadow: 0 1px 0 rgba(0,0,0,.35); }
.vp-seat.left .vp-mano .back, .vp-seat.right .vp-mano .back { width: 17px; height: 9px; }
.vp-mano .ft { display: block; filter: drop-shadow(0 1px 1px rgba(0,0,0,.35)); }
.vp-mano .ft svg { display: block; width: 100%; height: 100%; }
.vp-seat.bottom .vp-mano .ft { width: 26px; height: 52px; }
.vp-seat.top .vp-mano .ft { width: 13px; height: 26px; }
.vp-seat.left .vp-mano .ft, .vp-seat.right .vp-mano .ft { width: 26px; height: 13px; }
.vp-paso { position: absolute; z-index: 2; font-size: 12px; font-weight: 800; background: #fff7b5; color: #3a2312; border: 1px solid #d8c96a; border-radius: 99px; padding: 2px 9px; }
.vp-pie { background: rgba(0,0,0,.28); padding-bottom: env(safe-area-inset-bottom); }
.vp-narra { margin: 8px 12px 0; min-height: 20px; text-align: center; font-size: 14px; font-weight: 700; color: #e9f3ee; }
.vp-narra .rp-tile { display: inline-block; width: 30px; height: 15px; vertical-align: middle; }
.vp-narra .rp-tile svg { width: 100%; height: 100%; display: block; }
.vp-ctrl { padding: 8px 12px 12px; display: grid; gap: 8px; max-width: 560px; margin: 0 auto; }
.vp-manos { display: flex; justify-content: space-between; font-size: 12px; font-weight: 800; color: rgba(255,255,255,.75); }
.vp-linea { display: flex; gap: 2px; align-items: center; min-height: 14px; }
.vp-linea button { flex: 1; height: 8px; border-radius: 99px; border: 0; padding: 0; background: rgba(255,255,255,.22); cursor: pointer; min-width: 3px; }
.vp-linea button.hecho { background: rgba(255,255,255,.62); }
.vp-linea button.pase { background: rgba(255,247,181,.45); }
.vp-linea button.hecho.pase { background: #fff1a0; }
.vp-linea button.aqui { background: #f2c230; height: 13px; }
.vp-botones { display: flex; align-items: center; justify-content: center; gap: 8px; }
.vp-botones button { width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(255,255,255,.14); color: #fff; cursor: pointer; display: grid; place-items: center; padding: 0; }
.vp-botones button svg { width: 16px; height: 16px; fill: currentColor; }
.vp-botones .vp-play { width: 54px; height: 54px; background: #fbf7ec; color: #26473a; }
.vp-botones .vp-vel { width: auto; padding: 0 12px; border-radius: 99px; font: 900 14px Nunito, system-ui, sans-serif; }
@media (prefers-reduced-motion: reduce) { .lib-sheet { animation: none; } }