@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --bg:            #14170f;
  --bg-panel:      #1d2317;
  --bg-panel-2:    #242b1c;
  --line:          #3a4430;
  --khaki:         #cdc6a8;
  --khaki-dim:     #93927f;
  --olive:         #6b7a45;
  --olive-light:   #9caf6f;
  --blaze:         #e8641c;
  --blaze-dark:    #b94e14;
  --gold:          #d4af37;
  --silver:        #b9c0c9;
  --bronze:        #b0713a;
  --danger:        #c1432f;
  --radius:        3px;
}

*{ box-sizing:border-box; }

html,body{
  margin:0;
  padding:0;
  background:var(--bg);
  background-image:
    linear-gradient(var(--bg) 0%, var(--bg) 100%),
    repeating-linear-gradient(135deg, rgba(107,122,69,0.05) 0 2px, transparent 2px 40px);
  color:var(--khaki);
  font-family:'IBM Plex Sans', sans-serif;
  min-height:100vh;
}

h1,h2,h3{
  font-family:'Oswald', sans-serif;
  text-transform:uppercase;
  letter-spacing:0.04em;
  color:#eee7d0;
  margin:0 0 0.5em 0;
}

a{ color:var(--olive-light); text-decoration:none; }
a:hover{ color:var(--blaze); }

.wrap{ max-width:960px; margin:0 auto; padding:0 20px 60px; }

/* ---------- barra superior ---------- */
.topbar{
  border-bottom:2px solid var(--olive);
  background:var(--bg-panel);
  margin-bottom:32px;
}
.topbar-inner{
  max-width:960px; margin:0 auto; padding:16px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.brand{
  font-family:'Oswald', sans-serif; text-transform:uppercase;
  font-size:1.3rem; font-weight:700; letter-spacing:0.06em; color:#eee7d0;
  display:flex; align-items:center; gap:10px;
}
.brand .dot{ width:10px; height:10px; background:var(--blaze); border-radius:50%; display:inline-block; }
.nav{ display:flex; gap:14px; align-items:center; font-size:0.9rem; text-transform:uppercase; letter-spacing:0.03em; }
.nav a{ color:var(--khaki-dim); }
.nav a:hover{ color:var(--blaze); }
.nav .pill{
  border:1px solid var(--olive); padding:6px 12px; border-radius:var(--radius); color:var(--khaki);
}
.nav .pill:hover{ border-color:var(--blaze); color:var(--blaze); }

/* ---------- badges tipo sello ---------- */
.stamp{
  display:inline-block; font-family:'IBM Plex Mono', monospace; font-size:0.72rem;
  text-transform:uppercase; letter-spacing:0.08em; color:var(--bg);
  background:var(--blaze); padding:3px 8px; border-radius:2px; transform:rotate(-2deg);
}

/* ---------- tarjetas ---------- */
.card{
  background:var(--bg-panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px; margin-bottom:18px;
}
.card-list a.card-row{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  background:var(--bg-panel); border:1px solid var(--line); border-left:4px solid var(--olive);
  border-radius:var(--radius); padding:14px 18px; margin-bottom:10px; color:var(--khaki);
}
.card-list a.card-row:hover{ border-left-color:var(--blaze); background:var(--bg-panel-2); }
.card-row .title{ font-family:'Oswald', sans-serif; font-size:1.1rem; text-transform:uppercase; color:#eee7d0; }
.card-row .meta{ font-family:'IBM Plex Mono', monospace; font-size:0.8rem; color:var(--khaki-dim); }

.empty{
  border:1px dashed var(--line); border-radius:var(--radius); padding:28px; text-align:center; color:var(--khaki-dim);
}

/* ---------- botones ---------- */
.btn{
  display:inline-block; font-family:'IBM Plex Sans', sans-serif; font-weight:600;
  text-transform:uppercase; letter-spacing:0.03em; font-size:0.85rem;
  background:var(--blaze); color:#1a1400; border:none; padding:10px 18px;
  border-radius:var(--radius); cursor:pointer;
}
.btn:hover{ background:var(--blaze-dark); color:#fff; }
.btn.secondary{ background:transparent; border:1px solid var(--olive); color:var(--khaki); }
.btn.secondary:hover{ border-color:var(--blaze); color:var(--blaze); background:transparent; }
.btn.danger{ background:var(--danger); color:#fff; }
.btn.danger:hover{ background:#8f3122; }
.btn.small{ padding:6px 12px; font-size:0.75rem; }

.actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }

/* ---------- formularios ---------- */
label{ display:block; font-size:0.8rem; text-transform:uppercase; letter-spacing:0.04em; color:var(--khaki-dim); margin:14px 0 6px; }
input[type=text], input[type=date], input[type=password], textarea, select{
  width:100%; background:#0f120b; border:1px solid var(--line); color:var(--khaki);
  padding:10px 12px; border-radius:var(--radius); font-family:'IBM Plex Sans', sans-serif; font-size:0.95rem;
}
input:focus, textarea:focus, select:focus{ outline:2px solid var(--blaze); outline-offset:1px; border-color:var(--blaze); }
textarea{ min-height:80px; resize:vertical; }
input[type=file]{
  width:100%; background:#0f120b; border:1px solid var(--line); color:var(--khaki-dim);
  padding:10px 12px; border-radius:var(--radius); font-family:'IBM Plex Sans', sans-serif; font-size:0.85rem;
}
input[type=file]::file-selector-button{
  background:var(--olive); color:#0f120b; border:none; border-radius:var(--radius);
  padding:6px 12px; margin-right:10px; font-weight:600; cursor:pointer; text-transform:uppercase; font-size:0.75rem;
}
input[type=checkbox]{ width:auto; accent-color:var(--blaze); }
form .row{ display:flex; gap:16px; flex-wrap:wrap; }
form .row > div{ flex:1; min-width:200px; }

/* ---------- clasificación (elemento distintivo) ---------- */
.roster{ width:100%; border-collapse:collapse; margin-top:10px; }
.roster thead th{
  font-family:'IBM Plex Mono', monospace; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.08em;
  color:var(--khaki-dim); text-align:left; border-bottom:1px solid var(--olive); padding:8px 10px;
}
.roster tbody tr{ border-bottom:1px solid var(--line); }
.roster tbody tr:hover{ background:var(--bg-panel-2); }
.roster td{ padding:12px 10px; vertical-align:middle; }
.veteran-badge{
  display:inline-block; font-family:'IBM Plex Mono', monospace; font-size:0.68rem; font-weight:600;
  text-transform:uppercase; letter-spacing:0.08em; color:var(--bg);
  background:var(--gold); padding:4px 10px; border-radius:12px;
}
.rank-badge{
  display:inline-block; font-family:'IBM Plex Mono', monospace; font-size:0.68rem; font-weight:600;
  text-transform:uppercase; letter-spacing:0.08em; padding:4px 10px; border-radius:12px; white-space:nowrap;
}
.rank-badge.soldado{ background:#3a4430; color:var(--khaki-dim); }
.rank-badge.cabo{ background:var(--olive); color:#12150d; }
.rank-badge.teniente{ background:var(--olive-light); color:#12150d; }
.rank-badge.general{ background:var(--silver); color:#12150d; }
.rank-badge.veterano{ background:var(--gold); color:#2a2205; }
.rank-badge.heroe{ background:var(--blaze); color:#2a1200; }
.rank-num{
  font-family:'Oswald', sans-serif; font-size:1.4rem; font-weight:700; color:var(--khaki-dim); width:46px;
}
.roster tr.r1 .rank-num{ color:var(--gold); }
.roster tr.r2 .rank-num{ color:var(--silver); }
.roster tr.r3 .rank-num{ color:var(--bronze); }
.roster tr.r1{ border-left:3px solid var(--gold); }
.roster tr.r2{ border-left:3px solid var(--silver); }
.roster tr.r3{ border-left:3px solid var(--bronze); }
.nick{ font-family:'Oswald', sans-serif; font-size:1.02rem; color:#eee7d0; text-transform:uppercase; letter-spacing:0.02em; }
.nick-plairsoft{ font-family:'IBM Plex Mono', monospace; font-size:0.78rem; color:var(--khaki-dim); }
.count{ font-family:'IBM Plex Mono', monospace; font-size:1.1rem; text-align:right; }
.count .label{ font-size:0.68rem; color:var(--khaki-dim); text-transform:uppercase; display:block; }

/* ---------- listas de participantes en editor ---------- */
.tag{
  display:inline-flex; align-items:center; gap:8px; background:var(--bg-panel-2); border:1px solid var(--line);
  border-radius:20px; padding:6px 8px 6px 14px; margin:0 8px 8px 0; font-family:'IBM Plex Mono', monospace; font-size:0.82rem;
}
.tag form{ margin:0; }
.tag button{
  background:var(--danger); color:#fff; border:none; border-radius:50%; width:20px; height:20px; cursor:pointer; line-height:1;
}

.alert{ padding:12px 16px; border-radius:var(--radius); margin-bottom:16px; font-size:0.9rem; }
.alert.error{ background:rgba(193,67,47,0.15); border:1px solid var(--danger); color:#f2b3a6; }
.alert.info{ background:rgba(107,122,69,0.15); border:1px solid var(--olive); color:var(--olive-light); }

.breadcrumb{ font-family:'IBM Plex Mono', monospace; font-size:0.78rem; color:var(--khaki-dim); margin-bottom:10px; text-transform:uppercase; }
.breadcrumb a{ color:var(--khaki-dim); }

footer.site{ text-align:center; color:var(--khaki-dim); font-size:0.75rem; padding:30px 0; font-family:'IBM Plex Mono', monospace; }

@media (max-width:600px){
  .roster thead{ display:none; }
  .roster, .roster tbody, .roster tr, .roster td{ display:block; width:100%; }
  .roster tr{ padding:10px 0; }
  .roster td{ padding:2px 10px; }
  .count{ text-align:left; }
}