/* QuinielaLab app-shell — estilos de la interfaz de usuario.
   No contiene lógica: solo presentación del "pintor" de resultados. */

.ql-app { --ql-green:#0a6e3c; --ql-green-d:#085a31; --ql-bg:#f6f8f7; --ql-line:#dfe6e2; --ql-ink:#1c2b23;
	max-width: 900px; margin: 0 auto; color: var(--ql-ink); }
.ql-app * { box-sizing: border-box; }
.ql-loading { padding: 2rem; text-align: center; color: #6b7c72; }

.ql-card { background:#fff; border:1px solid var(--ql-line); border-radius:12px; padding:1rem 1.1rem; margin:0 0 1rem; }
.ql-h { margin:.2rem 0 .8rem; font-size:1.15rem; }
.ql-muted { color:#6b7c72; font-size:.9rem; }
.ql-row { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }

.ql-btn { display:inline-flex; align-items:center; justify-content:center; gap:.4rem; cursor:pointer;
	border:0; border-radius:10px; padding:.7rem 1.1rem; font-size:1rem; font-weight:600;
	background:var(--ql-green); color:#fff; text-decoration:none; }
.ql-btn:hover { background:var(--ql-green-d); }
.ql-btn.sec { background:#eef2f0; color:var(--ql-ink); }
.ql-btn.sec:hover { background:#e2e8e4; }
.ql-btn:disabled { opacity:.5; cursor:default; }
.ql-btn.block { width:100%; }

.ql-banner { display:flex; justify-content:space-between; align-items:center; gap:.6rem;
	background:#eafaf1; border:1px solid #bfe6cf; color:#0a6e3c; border-radius:10px; padding:.5rem .8rem; margin-bottom:1rem; font-size:.92rem; }
.ql-banner.warn { background:#fff6e6; border-color:#f0dca6; color:#8a6100; }
.ql-chip { background:#0a6e3c; color:#fff; border-radius:999px; padding:.15rem .6rem; font-size:.82rem; font-weight:700; white-space:nowrap; }
.ql-chip.usage { background:#8a6100; }
.ql-chip.usage.low { background:#a4331a; }

/* Planes */
.ql-plans { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:.8rem; margin-top:1rem; }
.ql-plan { border:1px solid var(--ql-line); border-radius:12px; padding:1rem; display:flex; flex-direction:column; background:#fff; }
.ql-plan.feat { border-color:#0a6e3c; box-shadow:0 0 0 1px #0a6e3c inset; }
.ql-plan-name { font-weight:700; font-size:1.05rem; }
.ql-plan-price { margin:.2rem 0; color:#6b7c72; }
.ql-plan-price b { color:#0a6e3c; font-size:1.5rem; }
.ql-plan-uses { font-size:.9rem; color:#1c2b23; background:#eafaf1; border:1px solid #bfe6cf; border-radius:8px; padding:.3rem .5rem; text-align:center; margin-bottom:.6rem; }
.ql-plan-acts { display:flex; flex-direction:column; gap:.35rem; margin-top:auto; }
.ql-btn.block { width:100%; }

/* Estadísticas */
.ql-statgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:.6rem; margin:.6rem 0 1rem; }
.ql-statbox { background:#f6f8f7; border:1px solid var(--ql-line); border-radius:12px; padding:.8rem; text-align:center; }
.ql-statbox b { display:block; font-size:1.6rem; color:#0a6e3c; line-height:1.1; }
.ql-statbox span { font-size:.8rem; color:#6b7c72; }
.ql-bars { display:flex; align-items:flex-end; gap:4px; height:80px; padding:.4rem; background:#f6f8f7; border-radius:10px; border:1px solid var(--ql-line); }
.ql-bar { flex:1; min-height:3px; background:#0a6e3c; border-radius:3px 3px 0 0; }
.ql-badges { display:flex; flex-wrap:wrap; gap:.5rem; }
.ql-badge { display:flex; align-items:center; gap:.35rem; padding:.35rem .6rem; border-radius:999px; border:1px solid var(--ql-line); background:#fff; opacity:.4; filter:grayscale(1); font-size:.82rem; }
.ql-badge.on { opacity:1; filter:none; border-color:#bfe6cf; background:#eafaf1; }
.ql-badge-l { font-weight:600; }
.ql-field input[readonly] { background:#f6f8f7; }

/* Comparador de boletos */
.ql-compare { display:flex; gap:.6rem; overflow-x:auto; padding-bottom:.4rem; }
.ql-compare-col { min-width:130px; border:1px solid var(--ql-line); border-radius:10px; overflow:hidden; }
.ql-compare-h { background:#eafaf1; color:#0a6e3c; font-weight:700; font-size:.8rem; padding:.4rem; text-align:center; }
.ql-compare-c { font-family:monospace; font-size:.8rem; letter-spacing:.12em; padding:.2rem .4rem; border-top:1px solid var(--ql-line); }
.ql-balance { font-size:1.05rem; margin:.2rem 0 .8rem; }
.ql-balance b { color:#0a6e3c; font-size:1.25rem; }
.ql-field .fila { display:flex; align-items:flex-start; gap:.4rem; font-weight:600; }
.ql-field .fila input[type=checkbox] { margin-top:.2rem; }

/* Tabla de partidos */
.ql-match { display:grid; grid-template-columns:1.7rem 1fr auto; gap:.5rem; align-items:center;
	padding:.5rem 0; border-top:1px solid var(--ql-line); }
.ql-match:first-child { border-top:0; }
.ql-num { width:1.6rem; height:1.6rem; border-radius:50%; background:var(--ql-green); color:#fff;
	display:flex; align-items:center; justify-content:center; font-size:.8rem; font-weight:700; }
.ql-teams { font-weight:600; font-size:.95rem; }
.ql-pcts { display:flex; gap:.3rem; margin-top:.2rem; }
.ql-pcts input { width:3.2rem; padding:.25rem; border:1px solid var(--ql-line); border-radius:6px; font-size:.82rem; text-align:center; }
.ql-signs { display:flex; gap:.25rem; }
.ql-sign { width:2.2rem; height:2.2rem; border-radius:8px; border:1px solid var(--ql-line);
	background:#fff; font-weight:700; cursor:pointer; }
.ql-sign.on { background:var(--ql-green); color:#fff; border-color:var(--ql-green); }

.ql-field { display:flex; flex-direction:column; gap:.3rem; margin:.5rem 0; }
.ql-field label { font-size:.88rem; font-weight:600; }
.ql-field input, .ql-field select { padding:.5rem; border:1px solid var(--ql-line); border-radius:8px; font-size:.95rem; }
.ql-cond { display:flex; flex-direction:column; gap:.5rem; }
.ql-cond .fila { display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; font-size:.9rem; }
.ql-cond .fila input[type=number] { width:3.4rem; padding:.3rem; border:1px solid var(--ql-line); border-radius:6px; }

.ql-result { background:#f2f8f4; border:1px solid #cfe6d8; border-radius:10px; padding:.8rem 1rem; }
.ql-stat { display:inline-block; margin-right:1.2rem; }
.ql-stat b { font-size:1.2rem; color:var(--ql-green); }
.ql-cols { max-height:260px; overflow:auto; font-family:ui-monospace,monospace; font-size:.85rem;
	background:#fff; border:1px solid var(--ql-line); border-radius:8px; padding:.5rem; margin-top:.6rem; }
.ql-cols .prem { background:#eaf7ea; }

.ql-tabs { display:flex; gap:.3rem; margin-bottom:1rem; flex-wrap:wrap; }
.ql-tab { padding:.5rem .9rem; border-radius:8px; border:1px solid var(--ql-line); background:#fff; cursor:pointer; font-weight:600; font-size:.9rem; }
.ql-tab.on { background:var(--ql-green); color:#fff; border-color:var(--ql-green); }

.ql-err { background:#fdecec; border:1px solid #f5c2c2; color:#a12; border-radius:8px; padding:.6rem .8rem; margin:.6rem 0; font-size:.9rem; }

.ql-list { list-style:none; margin:0; padding:0; }
.ql-list li { display:flex; justify-content:space-between; align-items:center; gap:.6rem; padding:.5rem 0; border-top:1px solid var(--ql-line); font-size:.9rem; }

@media (max-width:600px){
	.ql-match { grid-template-columns:1.5rem 1fr; }
	.ql-signs { grid-column:1 / -1; justify-content:flex-start; margin-top:.3rem; }
}