/* ========== SITE (unificado brand + layout) ========== */
:root{
  /* tokens brand */
  --green-felt: #0B6E4F;
  --green-felt-dark: #074C35;
  --green-felt-light: #139C6E;
  --ink-black: #0F1115;
  --white: #FFFFFF;
  --wood-light: #C08A53;
  --wood-mid: #9C6A3A;
  --wood-dark: #6E4621;
  --accent-gold: #D4AF37;
  --radius-xl: 16px;
  --shadow-soft: 0 8px 24px rgba(0,0,0,.18);

  /* layout vars */
  --pad:16px;
  --header-h:64px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}

/* Fondo de mesa (gradiente brand) */
body.bg-felt{
  background: radial-gradient(80% 60% at 50% 30%,
    var(--green-felt-light) 0%,
    var(--green-felt) 40%,
    var(--green-felt-dark) 100%);
}

/* Fondo madera disponible para secciones */
.bg-wood {
  background: linear-gradient(135deg, var(--wood-light), var(--wood-mid) 45%, var(--wood-dark) 100%);
}

/* Header fijo */
.site-topbar{
  position:sticky; top:0; z-index:1000;
  height: var(--header-h);
  display:flex; align-items:center; justify-content:space-between;
  padding: 0 calc(16px + env(safe-area-inset-left)) 0 calc(16px + env(safe-area-inset-right));
  background: rgba(10, 106, 85, .92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255,255,255,.15);
  color:#fff;
}
.site-topbar a, .site-topbar button{color:#fff; text-decoration:none; font-weight:700}

/* Botón Back sticky (queda visible aunque bajes) */
.back-sticky{
  position:sticky; top: calc(var(--header-h) + 8px); z-index:900;
  margin: 8px 16px 0;
}
.btn-back{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--ink-black); color:#fff; border:none; border-radius:999px;
  padding:10px 14px; text-decoration:none; cursor:pointer; font-weight:700;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
}

/* Contenedor */
.container{max-width:1200px;margin:0 auto;padding:16px}

/* Cards genéricas */
.card {
  background: var(--white);
  color: var(--ink-black);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-soft);
}

/* Cards/botones grandes del Home */
.grid4{
  display:grid; gap:14px;
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width:1000px){ .grid4{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:600px){ .grid4{ grid-template-columns: 1fr; } }

.tile{
  border-radius:16px; padding:18px; min-height:120px;
  background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.18);
  color:#fff; text-decoration:none; display:flex; align-items:flex-end; justify-content:space-between;
  font-weight:800; font-size:1.25rem;
}
.tile small{font-weight:600; opacity:.85}

/* Sección redes */
.socials{display:flex; gap:10px; flex-wrap:wrap}
.socials a{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:999px; background:var(--ink-black); color:#fff; text-decoration:none;
}

/* Pills */
.pills{display:flex; gap:8px; flex-wrap:wrap}
.pill{
  padding:8px 12px; border-radius:999px; background:var(--ink-black); color:#fff; text-decoration:none; font-weight:700;
}
.pill.is-active{background:#17372e}

/* Tablas (unificación) */
.frame { border-radius:16px; overflow:hidden; border: 2px solid rgba(255,255,255,.15); background:#fff; }
.table-wrap { overflow-x:auto; }

/* base table */
.table{ width:100%; border-collapse:separate; border-spacing:0; background: var(--white); }
/* header */
.table thead th{
  background: var(--ink-black);
  color:#fff; text-align:left; padding:12px 14px; font-weight:600; letter-spacing:.2px;
}
/* sticky opcional: aplicar .table--sticky a la tabla si lo querés */
.table--sticky thead th{ position: sticky; top: 0; z-index: 1; }
/* body */
.table tbody td{ color:#111; padding:12px 14px; border-top:1px solid rgba(0,0,0,.06); }

/* Forms */
.field{display:flex; flex-direction:column; gap:6px}
.input, select, textarea{
  padding:10px 12px; border-radius:10px;
  border:1px solid rgba(255,255,255,.2); background:#fff; color:var(--ink-black);
}
.btn{
  background:var(--ink-black); color:#fff; border:none; border-radius:10px; padding:10px 14px; cursor:pointer; font-weight:700;
}
.btn.primary{background:#17372e}

/* Admin helpers */
.panel { background: rgba(0,0,0,.2); border:1px solid rgba(255,255,255,.15); border-radius:14px; padding:14px; }