/* ============================================================
   Parleys — tema TriunfoBet (oro / negro). Poppins self-hosted.
   ============================================================ */

@font-face { font-family:'Poppins'; font-weight:400; font-style:normal; font-display:swap; src:url('/fonts/poppins-400.woff2') format('woff2'); }
@font-face { font-family:'Poppins'; font-weight:500; font-style:normal; font-display:swap; src:url('/fonts/poppins-500.woff2') format('woff2'); }
@font-face { font-family:'Poppins'; font-weight:600; font-style:normal; font-display:swap; src:url('/fonts/poppins-600.woff2') format('woff2'); }
@font-face { font-family:'Poppins'; font-weight:700; font-style:normal; font-display:swap; src:url('/fonts/poppins-700.woff2') format('woff2'); }
@font-face { font-family:'Poppins'; font-weight:800; font-style:normal; font-display:swap; src:url('/fonts/poppins-800.woff2') format('woff2'); }

:root {
  --oro:        #e6c05a;
  --oro-claro:  #f4d97a;
  --oro-oscuro: #c79a34;
  --grad-oro:   linear-gradient(135deg, #f4d97a 0%, #e0b64d 45%, #c79a34 100%);
  --bg:         #0b0b0e;
  --bg-2:       #121218;
  --card:       #17171f;
  --card-2:     #1e1e28;
  --linea:      #26262f;
  --texto:      #f3f3f5;
  --muted:      #8a8a97;
  --verde:      #34d17f;
  --rojo:       #ef5b6a;
  --radio:      16px;
  --sombra:     0 10px 30px rgba(0,0,0,.45);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: 'Poppins', system-ui, -apple-system, sans-serif;
  background:
    radial-gradient(1200px 600px at 50% -200px, rgba(230,192,90,.10), transparent 60%),
    var(--bg);
  color: var(--texto);
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

.container { max-width: 680px; margin: 0 auto; padding: 0 16px 96px; }
a { color: var(--oro); text-decoration: none; }
a:hover { color: var(--oro-claro); }

/* ---------- Header ---------- */
.top {
  position: sticky; top: 0; z-index: 20;
  background: rgba(11,11,14,.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linea);
}
.top .wrap {
  max-width: 680px; margin: 0 auto; padding: 12px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.logo { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 1.15rem; letter-spacing: .3px; }
.logo .marca {
  background: var(--grad-oro); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.logo .trofeo {
  width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
  background: var(--grad-oro); color: #1a1400; font-size: 15px; box-shadow: 0 4px 12px rgba(230,192,90,.35);
}
.top nav { display: flex; gap: 6px; }
.top nav a {
  font-size: .82rem; font-weight: 600; color: var(--muted);
  padding: 7px 12px; border-radius: 999px; border: 1px solid transparent;
}
.top nav a.activo, .top nav a:hover { color: var(--texto); background: var(--card); border-color: var(--linea); }

/* ---------- Titulos ---------- */
.hero { padding: 26px 0 10px; }
.hero h1 { margin: 0; font-size: 1.7rem; font-weight: 800; letter-spacing: -.5px; }
.hero p { margin: 6px 0 0; color: var(--muted); font-size: .92rem; }

/* ---------- Filtros ---------- */
.filtros { display: flex; gap: 8px; overflow-x: auto; padding: 16px 0 4px; scrollbar-width: none; }
.filtros::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto; padding: 8px 16px; border-radius: 999px; font-size: .85rem; font-weight: 600;
  background: var(--card); border: 1px solid var(--linea); color: var(--muted);
}
.chip.activo { background: var(--grad-oro); color: #1a1400; border-color: transparent; }

/* ---------- Formulario ---------- */
.form-card {
  margin-top: 18px; background: var(--card); border: 1px solid var(--linea);
  border-radius: var(--radio); padding: 20px; box-shadow: var(--sombra);
}
.campo { margin-bottom: 16px; }
.campo:last-of-type { margin-bottom: 0; }
label { display: block; font-size: .8rem; font-weight: 600; color: var(--muted); margin-bottom: 7px; }
input, select, textarea {
  width: 100%; padding: 12px 14px; font-family: inherit; font-size: .95rem;
  background: var(--bg-2); color: var(--texto);
  border: 1px solid var(--linea); border-radius: 12px; outline: none; transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus { border-color: var(--oro); box-shadow: 0 0 0 3px rgba(230,192,90,.18); }
select { appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238a8a97' d='M6 8 0 2l1.4-1.4L6 5.2 10.6.6 12 2z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; }
.hint { font-size: .72rem; color: var(--muted); margin-top: 6px; }
.segment { display: flex; gap: 8px; }
.segment label {
  flex: 1; margin: 0; cursor: pointer; text-align: center; padding: 11px; border-radius: 12px;
  background: var(--bg-2); border: 1px solid var(--linea); color: var(--muted); font-weight: 600; font-size: .9rem;
  position: relative;
}
.segment label input { position: absolute; opacity: 0; pointer-events: none; }
.segment label:has(input:checked) { background: var(--grad-oro); border-color: transparent; color: #1a1400; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 13px 18px; font-family: inherit; font-size: .95rem; font-weight: 700;
  border: none; border-radius: 12px; cursor: pointer; transition: transform .08s, filter .15s;
}
.btn:active { transform: translateY(1px); }
.btn-oro { background: var(--grad-oro); color: #1a1400; box-shadow: 0 6px 18px rgba(230,192,90,.28); }
.btn-oro:hover { filter: brightness(1.05); }
.btn-ghost { background: var(--card-2); color: var(--texto); border: 1px solid var(--linea); width: auto; }
.btn-sm { width: auto; padding: 9px 14px; font-size: .82rem; }
.btn-link { background: none; border: none; color: var(--muted); font-size: .78rem; cursor: pointer; padding: 4px 2px; width: auto; }
.btn-link:hover { color: var(--rojo); }

/* ---------- Tarjeta de parley ---------- */
.parley { background: var(--card); border: 1px solid var(--linea); border-radius: var(--radio); padding: 18px; margin-bottom: 16px; box-shadow: var(--sombra); }
.parley-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.parley-title { font-weight: 700; font-size: 1.05rem; margin: 0; }
.parley-meta { color: var(--muted); font-size: .78rem; margin-top: 3px; }
.autor { color: var(--oro); font-weight: 600; }
.codigo-pill {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 12px;
  background: var(--bg-2); border: 1px dashed var(--oro-oscuro); border-radius: 10px;
  padding: 8px 12px; font-size: .85rem;
}
.codigo-pill .tag { font-size: .64rem; font-weight: 700; letter-spacing: .5px; color: var(--muted); text-transform: uppercase; }
.codigo-pill code { font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; color: var(--oro-claro); font-size: .95rem; letter-spacing: .5px; }

/* ---------- Selecciones (combates) ---------- */
.selecciones { margin: 14px 0 0; display: flex; flex-direction: column; gap: 8px; }
.sel {
  background: var(--card-2); border: 1px solid var(--linea); border-radius: 12px; padding: 11px 13px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.sel-info { min-width: 0; }
.sel-evento { font-size: .84rem; font-weight: 600; color: var(--texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sel-linea { font-size: .74rem; color: var(--muted); margin-top: 2px; }
.sel-linea b { color: var(--oro-claro); font-weight: 600; }
.cuota {
  flex: 0 0 auto; font-weight: 700; font-size: .82rem; color: #1a1400;
  background: var(--grad-oro); border-radius: 8px; padding: 5px 10px; min-width: 54px; text-align: center;
}

/* ---------- Panel de totales (estilo TriunfoBet) ---------- */
.totales { margin-top: 14px; border-radius: 14px; overflow: hidden; border: 1px solid var(--oro-oscuro); }
.totales .marca-bar { background: var(--grad-oro); color: #1a1400; font-weight: 800; text-align: center; padding: 8px; letter-spacing: .5px; font-size: .82rem; }
.totales .filas { background: #f6f2e8; color: #2a2313; padding: 12px 14px; }
.totales .fila { display: flex; justify-content: space-between; padding: 4px 0; font-size: .88rem; }
.totales .fila.sep { border-top: 1px solid #e3dcc7; margin-top: 4px; padding-top: 8px; }
.totales .fila .k { color: #6b6350; }
.totales .fila .v { font-weight: 700; }
.totales .fila.gain .v { color: #1f9e57; }
.totales .fila.gain .k { font-weight: 700; }

/* ---------- Quien lo metio ---------- */
.metieron { margin-top: 14px; }
.metieron .lbl { font-size: .72rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }
.avatares { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pill-jug { display: inline-flex; align-items: center; gap: 6px; background: var(--bg-2); border: 1px solid var(--linea); border-radius: 999px; padding: 5px 11px; font-size: .78rem; }
.pill-jug .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--verde); }
.pill-jug .t { color: var(--muted); font-size: .68rem; }
.nadie { color: var(--muted); font-size: .82rem; margin-top: 6px; }

/* ---------- Acciones de la tarjeta ---------- */
.acciones { display: flex; gap: 8px; align-items: center; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--linea); flex-wrap: wrap; }
.acciones .meter { display: flex; gap: 8px; flex: 1; min-width: 0; }
.acciones .meter select { flex: 1; }
.acciones form { margin: 0; }
.spacer { flex: 1; }

/* ---------- Loader / skeleton ---------- */
.cargando { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 14px; background: var(--card-2); border: 1px solid var(--linea); border-radius: 12px; }
.spinner { width: 26px; height: 26px; border-radius: 50%; border: 3px solid rgba(230,192,90,.25); border-top-color: var(--oro); animation: giro .8s linear infinite; flex: 0 0 auto; }
@keyframes giro { to { transform: rotate(360deg); } }
.cargando .txt { font-size: .85rem; font-weight: 600; }
.cargando .txt small { display: block; color: var(--muted); font-weight: 400; font-size: .75rem; }
.skel { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.skel-row { height: 46px; border-radius: 12px; background: linear-gradient(100deg, var(--card-2) 30%, #2a2a36 50%, var(--card-2) 70%); background-size: 200% 100%; animation: shimmer 1.4s infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ---------- Pie de formulario ---------- */
.pie-form { color: var(--muted); font-size: .82rem; margin: 16px 2px 0; line-height: 1.6; }
.fin-espacio { height: 56px; }

/* ---------- Estado error ---------- */
.err-scrape { margin-top: 14px; padding: 14px; background: rgba(239,91,106,.08); border: 1px solid rgba(239,91,106,.3); border-radius: 14px; }
.err-top { display: flex; align-items: center; gap: 8px; font-size: .9rem; color: #ffc4cb; }
.err-ico { font-size: 1rem; }
.err-msg { margin-top: 6px; font-size: .82rem; color: #ff9aa5; }
.err-tip { margin-top: 6px; font-size: .76rem; color: var(--muted); }
.err-scrape .r { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.err-scrape .r form { margin: 0; }
.err-scrape .r .btn { text-decoration: none; }
.btn-link.edit { color: var(--oro); }
.btn-link.edit:hover { color: var(--oro-claro); }

/* ---------- Vacio ---------- */
.vacio { text-align: center; padding: 60px 20px; color: var(--muted); }
.vacio .ico { font-size: 42px; margin-bottom: 10px; }

/* ---------- Overlay de envio ---------- */
#overlay { position: fixed; inset: 0; z-index: 50; display: none; place-items: center; background: rgba(8,8,11,.82); backdrop-filter: blur(6px); }
#overlay.on { display: grid; }
#overlay .box { text-align: center; }
#overlay .spinner { width: 46px; height: 46px; border-width: 4px; margin: 0 auto 16px; }
#overlay .m { font-weight: 700; }
#overlay .s { color: var(--muted); font-size: .84rem; margin-top: 4px; }

/* ---------- FAB ---------- */
.fab { position: fixed; right: 18px; bottom: 18px; z-index: 30; width: 56px; height: 56px; border-radius: 18px; background: var(--grad-oro); color: #1a1400; display: grid; place-items: center; font-size: 26px; font-weight: 700; box-shadow: 0 10px 26px rgba(230,192,90,.4); }

/* ---------- Mobile ---------- */
@media (max-width: 480px) {
  .acciones { flex-direction: column; align-items: stretch; }
  .acciones .meter { width: 100%; }
  .acciones .btn, .acciones .meter select { width: 100%; }
  .hero h1 { font-size: 1.45rem; }
}