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

:root {
  --pitch-dark: #1B4332;
  --pitch: #2D6A4F;
  --pitch-light: #95D5B2;
  --chalk: #F8F7F2;
  --ink: #1B1B1B;
  --muted: #6B7280;
  --amber: #FFB703;
  --red: #E5484D;
  --border: #E3E1D9;
  --card: #FFFFFF;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  font-family: 'Inter', sans-serif;
  color: var(--ink);
  background: #0a1a0e;
}

.app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--chalk);
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 60px rgba(0,0,0,0.5);
  position: relative;
}

h1,h2,h3 { font-family:'Oswald',sans-serif; font-weight:600; letter-spacing:0.02em; margin:0; }

/* ── HEADER ── */
header.app-header {
  background: linear-gradient(160deg, #0f2d1c 0%, #1B4332 60%, #2D6A4F 100%);
  color: var(--chalk);
  padding: 1rem 1.1rem 0.8rem;
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 3px solid var(--amber);
}
header.app-header h1 {
  font-size: 1.25rem;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
header.app-header h1 .ball { font-size: 1.3rem; }
header.app-header h1 span.sub {
  color: var(--pitch-light);
  font-size: 0.78rem;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}
header.app-header .header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
header.app-header .page-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  color: var(--pitch-light);
  letter-spacing: 0.1em;
  margin-top: 0.15rem;
}
.cat-chip {
  display:inline-flex; align-items:center; gap:4px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  color: var(--chalk);
  font-size: 0.68rem; font-weight: 500;
  padding: 4px 9px; border-radius: 20px;
  text-decoration: none;
}
.cat-chip .icon { width:12px; height:12px; }

/* ── MAIN ── */
main { flex:1; padding:0.85rem 1rem 5.5rem; }

/* ── TABBAR ── */
nav.tabbar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  max-width: 480px;
  margin: 0 auto;
  background: #fff;
  border-top: 1px solid var(--border);
  display: flex;
  z-index: 20;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.08);
}
nav.tabbar a {
  flex: 1;
  border: none;
  background: none;
  padding: 0.5rem 0.1rem 0.55rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.6rem;
  font-weight: 500;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  text-decoration: none;
}
nav.tabbar a i { font-size: 1.2rem; }
nav.tabbar a.active { color: var(--pitch-dark); }
nav.tabbar a.active i { color: var(--pitch); }

/* ── CARDS ── */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0.75rem 0.85rem;
  margin-bottom: 0.55rem;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
.card-flat { box-shadow: none; border-radius: 10px; }

/* ── PLAYER ROW ── */
.player-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.player-info { flex:1; min-width:0; }
.player-info .name { font-size:0.9rem; font-weight:600; margin:0; }
.player-info .sub { font-size:0.72rem; color:var(--muted); margin:2px 0 0; }

/* ── JERSEY / AVATAR ── */
.jersey {
  width:42px; height:42px; flex-shrink:0;
  border-radius:10px;
  background: linear-gradient(135deg, #1B4332, #2D6A4F);
  color:var(--chalk);
  font-family:'Oswald',sans-serif;
  font-weight:700; font-size:1rem;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 2px 6px rgba(27,67,50,0.3);
}
.avatar {
  width:42px; height:42px; flex-shrink:0;
  border-radius:10px; object-fit:cover;
  border:2px solid var(--pitch-light);
}
.avatar-lg { width:64px; height:64px; border-radius:12px; }

/* ── ACTION BUTTONS ── */
.action-btns { display:flex; gap:5px; align-items:center; }

.action-btn {
  width:32px; height:32px;
  border-radius:8px;
  border:none;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  font-size:1rem;
  text-decoration:none;
  flex-shrink:0;
}
.action-btn.edit   { background:#FFF8E1; color:#F59E0B; }
.action-btn.archive{ background:#F0F4FF; color:#6366F1; }
.action-btn.restore{ background:#E6F4EA; color:#16A34A; }
.action-btn.delete { background:#FEF2F2; color:#EF4444; }
.action-btn.note   { background:#F0FDF4; color:#16A34A; }
.action-btn.view   { background:#F8FAFC; color:#64748B; }

/* ── FAB (Botón flotante añadir) ── */
.fab {
  position: fixed;
  bottom: 72px; right: calc(50vw - 230px);
  width: 52px; height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--pitch), var(--pitch-dark));
  color: #fff;
  border: none;
  font-size: 1.5rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(27,67,50,0.4);
  cursor: pointer;
  text-decoration: none;
  z-index: 15;
}
@media (max-width: 480px) {
  .fab { right: 18px; }
}

/* ── SECTION TITLE ── */
.section-title {
  font-size:0.72rem; text-transform:uppercase;
  color:var(--muted); font-weight:600;
  letter-spacing:0.07em;
  margin:1rem 0 0.5rem;
}
.section-title:first-child { margin-top:0; }

/* ── BOTONES ── */
.btn {
  font-family:'Inter',sans-serif; font-weight:500; font-size:0.85rem;
  border:1px solid var(--border); background:var(--card);
  border-radius:8px; padding:0.5rem 0.8rem;
  cursor:pointer; color:var(--ink); text-decoration:none; display:inline-block;
}
.btn-primary {
  background: linear-gradient(135deg, var(--pitch), var(--pitch-dark));
  color:var(--chalk); border:none; width:100%; padding:0.8rem;
  font-size:0.9rem; font-weight:500; border-radius:12px; text-align:center;
  box-shadow:0 3px 10px rgba(27,67,50,0.25); display:block;
}
.btn-amber { background:var(--amber); color:var(--pitch-dark); border:none; }
.btn-red   { background:var(--red); color:#fff; border:none; }
.btn-sm    { padding:0.4rem 0.65rem; font-size:0.78rem; border-radius:7px; }

/* ── PILLS DE ESTADO ── */
.status-pills { display:flex; gap:4px; flex-wrap:wrap; margin-top:0.5rem; }
.pill {
  font-size:0.67rem; font-weight:500; padding:5px 9px;
  border-radius:8px; border:1px solid var(--border);
  background:var(--card); color:var(--muted);
  cursor:pointer; white-space:nowrap;
}
.pill.active.presente   { background:#E6F4EA; border-color:#95D5B2; color:#1B4332; }
.pill.active.falta      { background:#FCEAEA; border-color:#F4AFAF; color:#8C1A1A; }
.pill.active.justificada{ background:#FFF3D6; border-color:#FFD777; color:#8A5A00; }
.pill.active.lesionado  { background:#F1E6FB; border-color:#CDA9F0; color:#5B2E91; }
.pill.active.tarde      { background:#E6F0FB; border-color:#A9CAF0; color:#1F4E91; }

/* ── STATS ── */
.stat-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:0.55rem; margin:0.75rem 0; }
.stat { background:var(--card); border:1px solid var(--border); border-radius:10px; padding:0.65rem 0.8rem; }
.stat .num { font-family:'Oswald',sans-serif; font-size:1.4rem; font-weight:600; }
.stat .lbl { font-size:0.68rem; color:var(--muted); text-transform:uppercase; letter-spacing:0.04em; }

/* ── INPUTS ── */
input, select, textarea {
  font-family:'Inter',sans-serif; font-size:0.9rem;
  padding:0.55rem 0.7rem; border:1px solid var(--border);
  border-radius:8px; background:var(--card); color:var(--ink); width:100%;
}
input:focus, select:focus, textarea:focus {
  outline:none; border-color: var(--pitch-light);
  box-shadow: 0 0 0 3px rgba(149,213,178,0.2);
}
textarea { resize:vertical; min-height:70px; }
label.field { display:block; font-size:0.75rem; font-weight:600; color:var(--muted); margin:0.65rem 0 0.2rem; }

/* ── CHECKBOX ── */
.checkbox-row { display:flex; align-items:center; gap:0.65rem; padding:0.5rem 0; border-bottom:1px solid var(--border); }
.checkbox-row:last-child { border-bottom:none; }
.checkbox-row input[type=checkbox] { width:auto; accent-color: var(--pitch); transform:scale(1.2); }

/* ── EMPTY STATE ── */
.empty { text-align:center; color:var(--muted); font-size:0.85rem; padding:2.5rem 1rem; }
.empty i { display:block; font-size:2.5rem; color:var(--pitch-light); margin-bottom:0.6rem; }

/* ── NOTA CARD ── */
.note-card {
  background:#F0FDF4; border:1px solid #BBF7D0;
  border-radius:10px; padding:0.65rem 0.8rem; margin-bottom:0.45rem;
}
.note-card p { margin:0; font-size:0.82rem; line-height:1.5; }
.note-card .note-meta { font-size:0.68rem; color:var(--muted); margin-top:4px; }

/* ── WA BOX ── */
.wa-box {
  background:#E9F8EF; border:1px solid #BFE6CC;
  border-radius:10px; padding:0.8rem;
  font-size:0.8rem; white-space:pre-wrap; line-height:1.6; margin-top:0.8rem;
}

/* ── PERFIL ── */
.profile-header {
  background: linear-gradient(135deg, #0f2d1c, #2D6A4F);
  border-radius:14px; padding:1.1rem; margin-bottom:0.8rem;
  display:flex; align-items:center; gap:0.85rem; color:#fff;
}
.profile-header .avatar, .profile-header .jersey { width:64px; height:64px; font-size:1.4rem; border-radius:14px; }
.profile-header .pname { font-family:'Oswald',sans-serif; font-size:1.2rem; font-weight:600; margin:0; }
.profile-header .psub { font-size:0.78rem; opacity:0.8; margin:3px 0 0; }

.stat-badge {
  display:inline-flex; align-items:center; gap:4px;
  background:rgba(255,255,255,0.15); border-radius:20px;
  padding:3px 10px; font-size:0.72rem; margin-top:6px; margin-right:4px;
}

/* ── MISC ── */
.row { display:flex; align-items:center; gap:0.65rem; }
.row-info { flex:1; min-width:0; }
.sub { font-size:0.75rem; color:var(--muted); margin:0; }
.icon-btn { border:none; background:none; color:var(--muted); cursor:pointer; font-size:1.1rem; padding:4px; }
form { margin:0; }
.divider { height:1px; background:var(--border); margin:0.8rem 0; }
.tag {
  display:inline-block; font-size:0.65rem; font-weight:600;
  padding:2px 8px; border-radius:20px; letter-spacing:0.04em;
}
.tag-green { background:#E6F4EA; color:#1B4332; }
.tag-amber { background:#FFF3D6; color:#8A5A00; }
.tag-red   { background:#FCEAEA; color:#8C1A1A; }
.tag-blue  { background:#E6F0FB; color:#1F4E91; }
.tag-purple{ background:#F1E6FB; color:#5B2E91; }

a.link { color:var(--pitch); font-size:0.8rem; text-decoration:none; }
a.link:hover { text-decoration:underline; }

/* ── ICONOS SVG ── */
.icon { display:block; flex-shrink:0; }
.action-btn .icon { width:17px; height:17px; }
.btn .icon { width:16px; height:16px; vertical-align:-3px; margin-right:3px; }
.fab .icon { width:24px; height:24px; }
nav.tabbar a .icon { width:21px; height:21px; }
.empty .icon { width:42px; height:42px; color:var(--pitch-light); margin:0 auto 0.6rem; display:block; }
.stat-badge .icon { width:13px; height:13px; vertical-align:-2px; margin-right:2px; }

/* ── MODAL ── */
.modal-overlay {
  position: fixed; inset:0; background:rgba(15,30,20,0.55);
  display:flex; align-items:center; justify-content:center;
  z-index: 100; padding:1.2rem;
  opacity:0; pointer-events:none; transition: opacity 0.15s ease;
}
.modal-overlay.open { opacity:1; pointer-events:auto; }
.modal-box {
  background:#fff; border-radius:16px; padding:1.3rem 1.2rem;
  max-width:340px; width:100%;
  box-shadow:0 10px 40px rgba(0,0,0,0.25);
  transform: scale(0.93) translateY(8px);
  transition: transform 0.15s ease;
}
.modal-overlay.open .modal-box { transform: scale(1) translateY(0); }
.modal-icon {
  width:46px; height:46px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:0.7rem;
}
.modal-icon.warn { background:#FFF3D6; color:#B45309; }
.modal-icon.danger { background:#FEF2F2; color:#DC2626; }
.modal-title { font-family:'Oswald',sans-serif; font-size:1.05rem; font-weight:600; margin:0 0 0.3rem; }
.modal-text { font-size:0.85rem; color:var(--muted); margin:0 0 1.1rem; line-height:1.5; }
.modal-actions { display:flex; gap:0.5rem; }
.modal-actions .btn { flex:1; text-align:center; }

/* ── TIMELINE (perfil) ── */
.timeline-item {
  display:flex; gap:0.7rem; padding:0.55rem 0;
  border-bottom:1px solid var(--border);
}
.timeline-item:last-child { border-bottom:none; }
.timeline-icon {
  width:32px; height:32px; border-radius:8px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.timeline-icon.tl-green  { background:#E6F4EA; color:#1B4332; }
.timeline-icon.tl-red    { background:#FCEAEA; color:#8C1A1A; }
.timeline-icon.tl-amber  { background:#FFF3D6; color:#8A5A00; }
.timeline-icon.tl-purple { background:#F1E6FB; color:#5B2E91; }
.timeline-icon.tl-blue   { background:#E6F0FB; color:#1F4E91; }
.timeline-icon.tl-grey   { background:#F1F5F9; color:#475569; }
.timeline-content { flex:1; min-width:0; }
.timeline-content p { margin:0; font-size:0.83rem; }
.timeline-content .timeline-meta { font-size:0.7rem; color:var(--muted); margin-top:1px; }

/* ── INFO GRID (perfil ficha) ── */
.info-grid { display:grid; grid-template-columns:1fr 1fr; gap:0.6rem; }
.info-item .info-label {
  font-size:0.65rem; text-transform:uppercase; letter-spacing:0.05em;
  color:var(--muted); display:flex; align-items:center; gap:4px; margin-bottom:2px;
}
.info-item .info-label .icon { width:13px; height:13px; }
.info-item .info-value { font-size:0.88rem; font-weight:500; }

.level-badge {
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 9px; border-radius:20px; font-size:0.7rem; font-weight:600;
  background: linear-gradient(135deg, var(--amber), #FFA000); color:#7A4A00;
}

/* ── CATEGORY CARDS ── */
.category-card {
  font-family:'Inter',sans-serif;
}
.category-card.active {
  border-color: var(--pitch-light);
  background: #F0FAF4;
}