/* ══════════════════════════════════════════════════════════════════
   Amistosas — marcador de partidas casuales (público)
   Tema CLARO únicamente (el sitio AAPP no es theme-aware). Fondo del
   sitio: crema; tarjetas blancas para máximo contraste y legibilidad.
   ════════════════════════════════════════════════════════════════ */
:root {
  --am-gold:     #c9a84c;
  --am-gold-dk:  #a9863a;
  --am-accent:   #1e3a5f;
  --am-text:     #1f2937;   /* texto principal (oscuro, legible) */
  --am-strong:   #111827;   /* títulos */
  --am-muted:    #667085;   /* secundario */
  --am-border:   #e6e2d8;   /* borde cálido acorde al crema */
  --am-surface:  #ffffff;   /* tarjetas */
  --am-soft:     #f6f4ef;   /* zonas suaves */
  --am-green:    #2d6a4f;
  --am-red:      #b23b3b;
  --am-shadow:   0 1px 2px rgba(17,24,39,.04), 0 4px 14px rgba(17,24,39,.05);
}

.am-page { padding-bottom: 4rem; color: var(--am-text); }
.am-page a { color: var(--am-accent); }

/* ── Hero (reserva el alto del navbar fijo para no chocar) ──────── */
.am-hero {
  background: linear-gradient(160deg, #23252b 0%, #14161a 100%);
  color: #f3f0ea;
  padding: calc(var(--nav-h, 72px) + 2.25rem) 2rem 2rem;
  position: relative;
  overflow: hidden;
}
.am-hero::before {
  content: ''; position: absolute; top: 0; left: 12%; right: 12%;
  height: 1px; background: linear-gradient(90deg, transparent, var(--am-gold), transparent);
}
.am-hero .section-label { color: var(--am-gold); }
.am-hero h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.5rem, 3vw, 2.15rem);
  margin: .25rem 0 .6rem; color: #fff; letter-spacing: -.01em; line-height: 1.15;
}
.am-hero-desc { color: rgba(255,255,255,.8); max-width: 60ch; font-size: .96rem; margin: 0; }

/* Página del tablero (sin hero): despeja el navbar con padding-top */
.am-board-wrap { padding: calc(var(--nav-h, 72px) + 1.75rem) 2rem 4rem; }

/* ── Flash ─────────────────────────────────────────────────────── */
.am-flash { padding:.8rem 1rem; border-radius:10px; margin-bottom:1.25rem;
            font-size:.92rem; border:1px solid transparent; }
.am-flash--exito { background:#e8f5ec; color:#1b5e34; border-color:#bfe3ca; }
.am-flash--error { background:#fdecec; color:#8f2020; border-color:#f4c4c4; }

/* ══ Landing: crear / abrir ════════════════════════════════════ */
.am-start { display:grid; grid-template-columns:1.35fr 1fr; gap:1.25rem;
            margin-bottom:2.5rem; align-items:start; }
.am-card { background:var(--am-surface); border:1px solid var(--am-border);
           border-radius:14px; padding:1.5rem; box-shadow:var(--am-shadow); }
.am-card--open { background:var(--am-soft); box-shadow:none; }
.am-card-title { font-size:1.15rem; font-weight:800; margin:0 0 .25rem; color:var(--am-strong); }
.am-card-sub   { color:var(--am-muted); font-size:.88rem; margin:0 0 1.25rem; }

.am-field { display:flex; flex-direction:column; gap:.45rem; margin-bottom:1.15rem; }
.am-field > span { font-size:.75rem; font-weight:700; text-transform:uppercase;
                   letter-spacing:.05em; color:var(--am-muted); }

/* Inputs de texto y selects — NO afecta a los radios */
.am-field input:not([type=radio]):not([type=checkbox]),
.am-field select,
.am-addrow input, .am-addrow select,
.am-vs-side select {
  padding:.6rem .75rem; border:1px solid var(--am-border); border-radius:9px;
  font-size:.95rem; background:#fff; color:var(--am-text); width:100%; box-sizing:border-box;
}
.am-field input:focus, .am-field select:focus,
.am-addrow input:focus, .am-addrow select:focus,
.am-vs-side select:focus {
  outline:none; border-color:var(--am-gold); box-shadow:0 0 0 3px rgba(201,168,76,.18);
}
.am-code-input { font-size:1.25rem !important; letter-spacing:.25em; font-weight:700;
                 text-align:center; }

/* ── Selector de tipo (radios como tarjetas) ───────────────────── */
.am-radios { display:flex; flex-direction:column; gap:.55rem; }
.am-radio { display:flex; align-items:center; gap:.7rem; cursor:pointer;
            border:1.5px solid var(--am-border); border-radius:10px; padding:.75rem .9rem;
            background:#fff; transition:border-color .15s, background .15s, box-shadow .15s; }
.am-radio:hover { border-color:var(--am-gold); }
.am-radio input[type=radio] { width:18px; height:18px; margin:0; flex:0 0 auto;
                              accent-color:var(--am-gold); cursor:pointer; }
.am-radio:has(input:checked) { border-color:var(--am-gold); background:#fbf6e6;
                               box-shadow:0 0 0 3px rgba(201,168,76,.14); }
.am-radio-body { display:flex; flex-direction:column; gap:.05rem; }
.am-radio-body strong { font-size:.95rem; color:var(--am-strong); }
.am-radio-body small  { color:var(--am-muted); font-size:.8rem; }

/* ── Botones ───────────────────────────────────────────────────── */
.am-btn { display:inline-block; padding:.65rem 1.2rem; border:1px solid var(--am-border);
          border-radius:9px; background:#fff; color:var(--am-accent); font-size:.92rem;
          font-weight:700; cursor:pointer; text-decoration:none;
          transition:opacity .15s, background .15s, border-color .15s; }
.am-btn:hover { background:var(--am-soft); border-color:var(--am-gold); }
.am-btn--primary { background:var(--am-gold); color:#3a2f08; border-color:var(--am-gold);
                   width:100%; margin-top:.35rem; }
.am-btn--primary:hover { background:var(--am-gold-dk); border-color:var(--am-gold-dk); }
.am-btn--ghost { padding:.42rem .8rem; font-size:.82rem; }
.am-linkbtn { background:none; border:none; color:var(--am-accent); cursor:pointer;
              font-size:.85rem; padding:.2rem .3rem; text-decoration:underline; }
.am-linkbtn--danger { color:var(--am-red); }
.am-linkbtn:hover { opacity:.8; }

/* ── Sesiones recientes ────────────────────────────────────────── */
.am-section-h { font-size:1.1rem; font-weight:800; margin:0 0 1rem; color:var(--am-strong); }
.am-recent-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
                  gap:1rem; }
.am-recent { display:block; background:var(--am-surface); border:1px solid var(--am-border);
             border-radius:12px; padding:1rem 1.1rem; text-decoration:none; color:var(--am-text);
             box-shadow:var(--am-shadow); transition:box-shadow .18s, transform .15s, border-color .15s; }
.am-recent:hover { box-shadow:0 6px 20px rgba(17,24,39,.1); transform:translateY(-2px);
                   border-color:var(--am-gold); }
.am-recent-top { display:flex; justify-content:space-between; align-items:center;
                 margin-bottom:.55rem; }
.am-recent-code { font-family:ui-monospace,monospace; font-weight:700; letter-spacing:.1em;
                  color:var(--am-muted); font-size:.85rem; }
.am-recent-name { font-weight:700; font-size:.98rem; margin-bottom:.35rem; line-height:1.25;
                  color:var(--am-strong); }
.am-recent-meta { color:var(--am-muted); font-size:.82rem; display:flex; gap:.35rem; }

/* ── Badges ────────────────────────────────────────────────────── */
.am-badge { display:inline-block; font-size:.7rem; font-weight:700; padding:.22rem .55rem;
            border-radius:6px; text-transform:uppercase; letter-spacing:.04em; }
.am-badge--grupo   { background:#e7eef6; color:var(--am-accent); }
.am-badge--duelo   { background:#e5f1ea; color:var(--am-green); }
.am-badge--match   { background:#f3ead0; color:#6b5a1e; }
.am-badge--cerrada { background:#ececef; color:#4b5563; }

/* ── Opciones de duelo (form de creación) ──────────────────────── */
.am-duel-opts { border-top:1px dashed var(--am-border); padding-top:1rem; margin-bottom:.25rem; }
.am-check { display:flex; align-items:flex-start; gap:.6rem; cursor:pointer; }
.am-check input[type=checkbox] { width:18px; height:18px; margin:.15rem 0 0; flex:0 0 auto;
                                 accent-color:var(--am-gold); cursor:pointer; }
.am-check strong { display:block; font-size:.92rem; color:var(--am-strong); }
.am-check small  { display:block; color:var(--am-muted); font-size:.8rem; line-height:1.35; }

/* ── Barra de formato + ganador del match ──────────────────────── */
.am-match-bar { display:flex; justify-content:space-between; align-items:baseline; gap:.5rem;
                flex-wrap:wrap; margin-bottom:.9rem; padding-bottom:.7rem;
                border-bottom:1px solid var(--am-border); }
.am-match-fmt  { font-weight:800; color:var(--am-strong); font-size:.95rem; }
.am-match-meta { color:var(--am-muted); font-size:.82rem; }
.am-match-left { margin-top:.85rem; text-align:center; color:var(--am-muted); font-size:.85rem; }
.am-winner { margin-top:.9rem; text-align:center; font-size:1.02rem; font-weight:700;
             color:#5a4a12; background:#fbf6e6; border:1px solid #ecdca6;
             border-radius:10px; padding:.6rem .8rem; }
.am-winner strong { color:var(--am-strong); }
.am-winner--tie { color:#4b5563; background:var(--am-soft); border-color:var(--am-border); }

/* ══ Tablero de sesión ═════════════════════════════════════════ */
.am-back { display:inline-block; color:var(--am-muted); text-decoration:none;
           font-size:.88rem; margin-bottom:1rem; }
.am-back:hover { color:var(--am-accent); }

.am-head { display:flex; justify-content:space-between; align-items:flex-start;
           gap:1.25rem; flex-wrap:wrap; margin-bottom:1.25rem; }
.am-head-badges { display:flex; gap:.4rem; margin-bottom:.5rem; }
.am-title { font-size:1.6rem; font-weight:800; margin:0; line-height:1.15; color:var(--am-strong); }

.am-share { text-align:right; }
.am-share-lbl { display:block; font-size:.7rem; text-transform:uppercase;
                letter-spacing:.05em; color:var(--am-muted); margin-bottom:.3rem; }
.am-share-row { display:flex; align-items:center; gap:.5rem; }
.am-share-code { font-family:ui-monospace,monospace; font-size:1.25rem; font-weight:800;
                 letter-spacing:.2em; color:var(--am-strong); background:#fff;
                 border:1px dashed var(--am-gold); border-radius:9px; padding:.3rem .75rem; }

.am-closed-note { background:#fbf6e6; border:1px solid #ecdca6; border-radius:10px;
                  padding:.7rem 1rem; font-size:.9rem; color:#6b5a1e;
                  margin-bottom:1.25rem; }

.am-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; align-items:start; }
.am-col  { display:flex; flex-direction:column; gap:1.25rem; }

.am-panel { background:var(--am-surface); border:1px solid var(--am-border);
            border-radius:14px; padding:1.25rem; box-shadow:var(--am-shadow); }
.am-panel-h { font-size:1.05rem; font-weight:800; margin:0 0 1rem; color:var(--am-strong);
              display:flex; align-items:center; gap:.5rem; }
.am-count { font-size:.76rem; font-weight:700; background:var(--am-soft);
            color:var(--am-muted); border-radius:20px; padding:.1rem .6rem; }
.am-empty { color:var(--am-muted); font-size:.9rem; padding:.5rem 0; }
.am-hint  { color:var(--am-muted); font-size:.82rem; margin:.5rem 0 0; }

/* ── Lista de jugadores ────────────────────────────────────────── */
.am-players { list-style:none; margin:0 0 1rem; padding:0; display:flex;
              flex-direction:column; gap:.35rem; }
.am-player { display:flex; justify-content:space-between; align-items:center;
             padding:.55rem .7rem; border-radius:9px; background:var(--am-soft); }
.am-player-name { color:var(--am-text); font-weight:600; }
.am-player-name a { color:var(--am-accent); text-decoration:none; font-weight:600; }
.am-player-name a:hover { text-decoration:underline; }
.am-guest-tag { font-size:.66rem; color:var(--am-muted); text-transform:uppercase;
                letter-spacing:.04em; margin-left:.35rem; }
.am-inline { display:inline; margin:0; }
.am-x { background:none; border:none; color:var(--am-muted); font-size:1.3rem;
        line-height:1; cursor:pointer; padding:0 .25rem; border-radius:5px; }
.am-x:hover { color:var(--am-red); }

.am-addplayer { display:flex; flex-direction:column; gap:.6rem;
                border-top:1px solid var(--am-border); padding-top:1rem; }
.am-addactions { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; }
.am-addactions .am-btn--primary { width:auto; margin-top:0; }

/* ── Anotar resultado ──────────────────────────────────────────── */
.am-vs { display:flex; align-items:flex-end; gap:.75rem; margin-bottom:1rem; }
.am-vs-side { flex:1; display:flex; flex-direction:column; gap:.35rem; min-width:0; }
.am-vs-lbl { font-size:.76rem; font-weight:700; color:var(--am-muted);
             display:flex; align-items:center; gap:.35rem; }
.am-vs-x { color:var(--am-muted); font-weight:700; padding-bottom:.55rem; }
.am-sq { width:.75rem; height:.75rem; border-radius:2px; display:inline-block;
         border:1px solid #b9b2a0; }
.am-sq-w { background:#f0d9b5; }
.am-sq-b { background:#b58863; }

/* Duelo: colores fijos auto-rotados (sin selects) */
.am-duel-assign { display:flex; align-items:stretch; gap:.6rem; margin-bottom:.6rem; }
.am-assign-side { flex:1; min-width:0; background:var(--am-soft); border:1px solid var(--am-border);
                  border-radius:10px; padding:.6rem .8rem; display:flex; flex-direction:column; gap:.3rem; }
.am-assign-side strong { color:var(--am-strong); font-size:1rem; line-height:1.2;
                         overflow:hidden; text-overflow:ellipsis; }
.am-duel-assign .am-vs-x { align-self:center; padding:0; }
.am-rot-hint { margin:0 0 1rem; }

.am-results { display:flex; flex-direction:column; gap:.5rem; }
.am-resbtn { padding:.75rem 1rem; border:1.5px solid var(--am-border); border-radius:10px;
             background:#fff; color:var(--am-text); cursor:pointer; font-size:.92rem; text-align:left;
             display:flex; justify-content:space-between; align-items:center;
             transition:border-color .15s, background .15s; }
.am-resbtn:hover { border-color:var(--am-gold); background:#fbf6e6; }
.am-resbtn b { font-variant-numeric:tabular-nums; color:var(--am-strong); }
.am-resbtn--draw { color:var(--am-muted); }

/* ── Duelo (marcador grande) ───────────────────────────────────── */
.am-duel { display:flex; align-items:center; gap:1rem; text-align:center; }
.am-duel-side { flex:1; min-width:0; }
.am-duel-name { font-weight:700; font-size:.95rem; margin-bottom:.35rem; color:var(--am-strong);
                overflow:hidden; text-overflow:ellipsis; }
.am-duel-score { font-size:2.6rem; font-weight:800; line-height:1; color:var(--am-accent);
                 font-variant-numeric:tabular-nums; }
.am-duel-mid { display:flex; flex-direction:column; align-items:center; color:var(--am-muted); }
.am-duel-mid span { font-size:1.6rem; font-weight:700; }
.am-duel-mid small { font-size:.72rem; }
.am-duel-detail { text-align:center; color:var(--am-muted); font-size:.82rem; margin-top:.85rem; }

/* ── Tabla de posiciones ───────────────────────────────────────── */
.am-tablewrap { overflow-x:auto; }
.am-table { width:100%; border-collapse:collapse; font-size:.9rem; color:var(--am-text); }
.am-table th, .am-table td { padding:.55rem .5rem; text-align:center;
                             border-bottom:1px solid var(--am-border); white-space:nowrap; }
.am-table thead th { font-size:.7rem; text-transform:uppercase; letter-spacing:.04em;
                     color:var(--am-muted); font-weight:700; }
.am-table tbody tr:first-child td { font-weight:600; }
.am-ta-l { text-align:left !important; }
.am-table td.am-ta-l a { color:var(--am-accent); text-decoration:none; font-weight:600; }
.am-table td.am-ta-l a:hover { text-decoration:underline; }
.am-pos { color:var(--am-muted); font-weight:700; }
.am-pts { font-weight:800; color:var(--am-accent); font-variant-numeric:tabular-nums; }

/* ── Historial ─────────────────────────────────────────────────── */
.am-history { list-style:none; margin:0; padding:0; display:flex;
              flex-direction:column; gap:.25rem; }
.am-hist { display:flex; justify-content:space-between; align-items:center;
           padding:.5rem .7rem; border-radius:9px; font-size:.9rem; }
.am-hist:nth-child(odd) { background:var(--am-soft); }
.am-hist-players { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; color:var(--am-text); }
.am-hist-res { font-weight:700; color:var(--am-strong); font-variant-numeric:tabular-nums;
               background:#fff; border:1px solid var(--am-border); border-radius:6px;
               padding:.05rem .45rem; }
.am-win  { font-weight:700; color:var(--am-green); }
.am-loss { color:var(--am-muted); }

.am-foot { margin-top:1.5rem; text-align:center; }

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width:820px) {
  .am-start { grid-template-columns:1fr; }
  .am-grid  { grid-template-columns:1fr; }
  .am-share { text-align:left; }
  .am-head  { flex-direction:column; }
}
@media (max-width:640px) {
  .am-hero { padding: calc(var(--nav-h, 72px) + 1.25rem) 1.25rem 1.5rem; }
  .am-board-wrap { padding: calc(var(--nav-h, 72px) + 1rem) 1rem 3rem; }
  .am-card, .am-panel { padding:1.15rem; }
}
@media (max-width:480px) {
  .am-title { font-size:1.35rem; }
  .am-duel-score { font-size:2.1rem; }
  .am-vs { flex-wrap:wrap; }
}