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


/* ===========================================================
   TOKENS / VARIABLES
=========================================================== */
:root{
  /* Paleta base (fallbacks) */
  --chat--color-primary: #d26015;
  --chat--color-primary-shade-50: #b64f0f;
  --chat--color-primary-shade-100: #a54a10;
  --chat--color-secondary: #2563eb;
  --chat--color-secondary-shade-50: #194ec7;
  --chat--color-white: #ffffff;
  --chat--color-light: #f3f4f6;
  --chat--color-light-shade-50: #e5e7eb;
  --chat--color-light-shade-100: #d1d5db;
  --chat--color-medium: #d2d4d9;
  --chat--color-dark: #1f2937;
  --chat--color-disabled: #777980;

  --chat--window--width: 420px;
  --chat--window--height: 600px;

  --chat--toggle--background: #d26015;
  --chat--toggle--hover--background: #a54a10;
  --chat--toggle--active--background: #c05615;
  --chat--toggle--color: #fff;

  --chat--header--background: #1f2937;
  --chat--header--color: #f3f4f6;

  /* Branding dinámico (puedes sobreescribir por JS) */
  --color-campo-primario: #d26015;
  --color-boton-texto: #fff;
  --color-boton-border: transparent;
  --color-boton-hover: #a54a10;
  --color-fondo-footer: #1f2937;
  --color-texto-footer: #f3f4f6;
  --color-subtitulo-reglas: #ff5b45; /* fallback; sobreescribe via JS */

  /* Grises “tailwind-like” para reemplazos graduales */
  --c-gray-50:#f9fafb; --c-gray-100:#f3f4f6; --c-gray-200:#e5e7eb; --c-gray-300:#d1d5db;
  --c-gray-600:#4b5563; --c-gray-700:#374151; --c-gray-800:#1f2937; --c-gray-900:#111827;

  /* Acentos */
  --c-primary:#d26015; --c-primary-700:#a54a10;
  --c-blue:#2563eb;  --c-amber:#f59e0b;

  /* Scorecard sticky offset */
  --score-sticky-top: 0px;
}


/* ===========================================================
   BASE / RESET
=========================================================== */
html, :host{
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
  font-family: ui-sans-serif, system-ui, "Inter", sans-serif, "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  font-feature-settings: normal;
  font-variation-settings: normal;
  -webkit-tap-highlight-color: transparent;
}
*,::before,::after{ box-sizing:border-box; border-width:0; border-style:solid; border-color:#e5e7eb; }
::before,::after{ --tw-content:''; }
body{ margin:0; line-height:inherit; background:#f6f7fb; }
img,svg,video,canvas,audio,iframe,embed,object{ display:block; vertical-align:middle; }
img,video{ max-width:100%; height:auto; }
a{ color:inherit; text-decoration:inherit; }
b,strong{ font-weight:bolder; }
small{ font-size:80%; }
table{ text-indent:0; border-color:inherit; border-collapse:collapse; }
button,input,optgroup,select,textarea{
  font:inherit; letter-spacing:inherit; color:inherit; margin:0; padding:0; line-height:inherit; font-feature-settings:inherit; font-variation-settings:inherit;
}
button,select{ text-transform:none; }
button,input[type='button'],input[type='reset'],input[type='submit']{ -webkit-appearance:button; background:transparent; }
:-moz-focusring{ outline:auto; }
:-moz-ui-invalid{ box-shadow:none; }
summary{ display:list-item; }
textarea{ resize:vertical; }
input::placeholder, textarea::placeholder{ opacity:1; color:#9ca3af; }
[hidden]:where(:not([hidden="until-found"])){ display:none; }
html, body{ width:100%; height:100%; overflow-x:hidden; overflow-y:auto; }
body{ font-family:"Inter",sans-serif; }

/* evita doble-tap->zoom en navegadores modernos sin deshabilitar pinch */
html, body, button, a, .stepper, .stepper-btn {
  touch-action: manipulation;
}


/* ===========================================================
   UTILIDADES (solo las usadas)
=========================================================== */
.container{ width:100%; }
@media (min-width:640px){ .container{ max-width:640px; } }
@media (min-width:768px){ .container{ max-width:768px; } }
@media (min-width:1024px){ .container{ max-width:1024px; } }
@media (min-width:1280px){ .container{ max-width:1280px; } }
@media (min-width:1536px){ .container{ max-width:1536px; } }

.sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0; }
.sticky{ position:sticky; } .top-0{ top:0; } .z-10{ z-index:10; }
.mx-auto{ margin-left:auto; margin-right:auto; }
.mt-1{ margin-top:.25rem; } .mt-2{ margin-top:.5rem; } .mt-4{ margin-top:1rem; } .mt-6{ margin-top:1.5rem; } .mt-8{ margin-top:2rem; }
.mb-2{ margin-bottom:.5rem; } .mb-4{ margin-bottom:1rem; } .mb-6{ margin-bottom:1.5rem; }
.ml-3{ margin-left:.75rem; }
.block{ display:block; } .flex{ display:flex; } .grid{ display:grid; } .table{ display:table; }
.flex-col{ flex-direction:column; } .flex-wrap{ flex-wrap:wrap; } .items-center{ align-items:center; } .justify-between{ justify-content:space-between; }
.grid-cols-1{ grid-template-columns:repeat(1,minmax(0,1fr)); }
.gap-4{ gap:1rem; } .gap-6{ gap:1.5rem; }
.space-x-4 > :not([hidden]) ~ :not([hidden]){ --tw-space-x-reverse:0; margin-right:calc(1rem * var(--tw-space-x-reverse)); margin-left:calc(1rem * (1 - var(--tw-space-x-reverse))); }
.space-y-4 > :not([hidden]) ~ :not([hidden]){ --tw-space-y-reverse:0; margin-top:calc(1rem * (1 - var(--tw-space-y-reverse))); margin-bottom:calc(1rem * var(--tw-space-y-reverse)); }
.hidden{ display:none !important; }
.h-4{ height:1rem; } .w-4{ width:1rem; } .w-full{ width:100%; } .max-w-5xl{ max-width:64rem; }
.flex-1{ flex:1 1 0%; }
.border{ border-width:1px; } .border-b{ border-bottom-width:1px; }
.border-collapse{ border-collapse:collapse; }
.border-gray-300{ border-color:rgb(209 213 219 / 1); }
.rounded{ border-radius:.25rem; } .rounded-lg{ border-radius:.5rem; } .rounded-xl{ border-radius:.75rem; }
.overflow-hidden{ overflow:hidden; } .overflow-x-auto{ overflow-x:auto; }
.bg-white{ background:#fff; }
.bg-gray-50{ background:var(--c-gray-50); }
.bg-gray-100{ background:var(--c-gray-100); }
.bg-gray-200{ background:var(--c-gray-200); }
.bg-gray-300{ background:var(--c-gray-300); }
.bg-gray-800{ background:var(--c-gray-800); }
.bg-blue-100{ background:rgb(219 234 254 / 1); }
.bg-green-100{ background:rgb(220 252 231 / 1); }
.bg-green-600{ background:rgb(22 163 74 / 1); }
.bg-primary-500\/10{ background-color: rgb(210 96 21 / .1); }
/* bg-primary-700 mapeada más abajo vía branding */

.p-2{ padding:.5rem; } .p-3{ padding:.75rem; } .p-4{ padding:1rem; } .p-6{ padding:1.5rem; } .px-4{ padding-left:1rem; padding-right:1rem; }
.py-2{ padding-top:.5rem; padding-bottom:.5rem; } .py-3{ padding-top:.75rem; padding-bottom:.75rem; } .pb-2{ padding-bottom:.5rem; }

.text-center{ text-align:center; } .text-right{ text-align:right; }
.text-sm{ font-size:.875rem; line-height:1.25rem; }
.text-lg{ font-size:1.125rem; line-height:1.75rem; }
.text-2xl{ font-size:1.5rem; line-height:2rem; }
.text-3xl{ font-size:1.875rem; line-height:2.25rem; }
.font-medium{ font-weight:500; } .font-semibold{ font-weight:600; } .font-bold{ font-weight:700; } .font-extrabold{ font-weight:800; }

.text-white{ color:#fff; }
.text-gray-600{ color:var(--c-gray-600); }
.text-gray-700{ color:var(--c-gray-700); }
.text-gray-800{ color:var(--c-gray-800); }
.text-gray-900{ color:var(--c-gray-900); }
.text-blue-600{ color:#2563eb; }
.text-blue-800{ color:#1e40af; }
.text-green-700{ color:#15803d; }
.text-green-800{ color:#166534; }
.text-primary-600{ color:#c05621; } .text-primary-700{ color:#a54a10; } .text-primary-800{ color:#8c3e0e; }

.cursor-pointer{ cursor:pointer; } .select-none{ -webkit-user-select:none; user-select:none; }

.shadow-md{
  --tw-shadow:0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
  box-shadow:var(--tw-shadow);
}
.blur{ --tw-blur:blur(8px); filter:var(--tw-blur); }

.transition{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-duration:150ms; transition-timing-function:cubic-bezier(.4,0,.2,1);
}
.focus-within\:ring-2:focus-within{
  box-shadow:0 0 0 2px var(--tw-ring-color, #d26015);
}
.focus-within\:ring-primary-500:focus-within{ --tw-ring-color: rgb(210 96 21); }
.focus\:outline-none:focus{ outline:2px solid transparent; outline-offset:2px; }
.focus\:ring-1:focus{ box-shadow:0 0 0 1px var(--tw-ring-color,#9ca3af); }
.focus\:ring-2:focus{ box-shadow:0 0 0 2px var(--tw-ring-color,#9ca3af); }
.focus\:ring-gray-400:focus{ --tw-ring-color: rgb(156 163 175); }
.focus\:ring-green-500:focus{ --tw-ring-color: rgb(34 197 94); }
.focus\:ring-primary-500:focus{ --tw-ring-color: rgb(210 96 21); }
.hover\:bg-gray-300:hover{ background:var(--c-gray-300); }
.hover\:bg-green-700:hover{ background:#15803d; }
.hover\:bg-primary-800:hover{ background:#8c3e0e; }
.hover\:border-primary-500:hover{ border-color:var(--c-primary); }

@media (min-width:640px){
  .sm\:w-auto{ width:auto; }
  .sm\:flex-1{ flex:1 1 0%; }
  .sm\:grid-cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .sm\:flex-row{ flex-direction:row; }
  .sm\:p-5{ padding:1.25rem; }
}
@media (min-width:768px){
  .md\:grid-cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .md\:p-6{ padding:1.5rem; }
  .md\:text-4xl{ font-size:2.25rem; line-height:2.5rem; }
}


/* ===========================================================
   ESTADOS / UX
=========================================================== */
.loading{ opacity:.5; pointer-events:none; }


/* ===========================================================
   TABLAS / SCROLLERS
=========================================================== */
.table-scroller{ overflow:auto; max-height:70vh; -webkit-overflow-scrolling:touch; }
.sticky-header th{ position:sticky; top:0; z-index:10; background-color:var(--c-gray-800); }
table{ table-layout:auto !important; width:100%; text-align:center; }
th,td{ padding-left:2px !important; padding-right:2px !important; font-size:.9rem; }
th.jugador, td.jugador{ white-space:nowrap; }


/* ===========================================================
   MARCAS DE GOLF (birdie/eagle/bogey)
=========================================================== */
.birdie{
  display:inline-block; border:2px solid var(--c-blue); border-radius:50%;
  width:28px; height:28px; font-weight:bold; color:var(--c-blue);
}
.par{ display:inline-block; padding:0 .4em; user-select:none; }
.bogey{
  display:inline-block; border:2px solid var(--c-gray-700); padding:0 .4em; font-weight:bold; color:var(--c-gray-700);
}
/* ===== Eagle (doble círculo) — centrado y nítido ===== */
.eagle-outer{
  display:inline-block;
  line-height:1;
  text-shadow:0 0 0 currentColor; /* ayuda a html2canvas */
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px;               /* pares -> crujido cero */
  border:2px solid var(--c-blue);         /* sin fracciones */
  border-radius:50%;
  line-height:1;
  vertical-align:middle;                  /* alínea con texto/otros badges */
  background:#fff;
}
.eagle-inner{
  position:relative;
  font-size:16px;        /* asegura tamaño legible dentro de 26px */
  line-height:1;
  display:flex; align-items:center; justify-content:center;
  width:26px; height:26px;                /* cabe holgado dentro de 34-2*2 */
  border:2px solid var(--c-blue);
  border-radius:50%;
  font-weight:bold; color:var(--c-blue);
  background:#fff;
  line-height:1;
}

/* Eagle: asegura que el número se pinte bien también en PDF */
.eagle-inner .score-num{
  display:inline-block;
  line-height:1;
  text-shadow:0 0 0 currentColor;
}

/* Double bogey (doble cuadro) */
.double-bogey-outer{
  display:inline-block;                /* <-- igual que eagle-outer */
  line-height:1;                       /* <-- fija baseline */
  text-shadow:0 0 0 currentColor;      /* <-- ayuda a html2canvas */
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px;
  border:2px solid var(--c-gray-700);
  border-radius:4px; background:#fff; vertical-align:middle;
}

.double-bogey-inner{
  position:relative;                   /* <-- igual que eagle-inner */
  display:flex; align-items:center; justify-content:center;
  width:26px; height:26px;
  border:2px solid var(--c-gray-700);
  border-radius:4px; background:#fff;
  font-weight:bold; color:var(--c-gray-700);
  line-height:1;
  text-shadow:0 0 0 currentColor;
}

/* refuerza el texto para el export */
.double-bogey-inner .score-num{
  display:inline-block; line-height:1; text-shadow:0 0 0 currentColor;
}


/* Alinea todos los badges en línea */
.birdie, .bogey, .par, .double-bogey-outer, .double-bogey-inner, .eagle-outer{
  vertical-align:middle;
}

/* En el resumen, centra el contenido de celdas por si falta */
#summary-section td{ vertical-align:middle; }
.no-margin-span{ display:inline-block; vertical-align:middle; margin:0 !important; padding:0 !important; line-height:1 !important; }


/* ===========================================================
   SCORECARD (tabla + ventaja)
=========================================================== */
#scorecard-table, #scorecard-table th, #scorecard-table td{
  padding:.3em .5em !important; line-height:1.1 !important; vertical-align:middle !important; font-size:1rem;
}
#scorecard-table{ border-collapse:separate; border-spacing:0; width:100%; table-layout:auto; }

.cell-hole-with-ventaja{
  position:relative; padding:.4em .2em .2em .2em !important; vertical-align:top; font-weight:bold; font-size:1rem;
}

/* Ventaja dentro de la celda del hoyo (posicionada) */
.cell-hole-with-ventaja .ventaja-number{
  position:absolute; right:.24em; bottom:.12em; font-size:.64em; color:#888; font-weight:normal;
  -webkit-user-select:none; user-select:none; pointer-events:none;
}

/* Ventaja como badge inline (resúmenes, fuera de celda) */
.ventaja-badge{ display:inline-block; font-size:.8em; color:var(--c-amber); margin-left:.3em; }

/* Alias específico de summary para compatibilidad con HTML existente */
#summary-content .ventaja-number{ font-size:.7em; margin-left:0; margin-top:.1em; color:var(--c-amber); }

/* Sticky: thead y primera columna */
#scorecard-head{ position:static !important; top:auto !important; z-index:auto !important; }
#scorecard-head th{
  position:sticky; top:var(--score-sticky-top); z-index:60; background:var(--c-gray-800); color:#fff;
}
#scorecard-head th:first-child{
  left:0; z-index:70; box-shadow:2px 0 0 rgba(0,0,0,.06);
}
#scorecard-table td:first-child{
  position:sticky; left:0; top:auto; z-index:40; box-shadow:2px 0 0 rgba(0,0,0,.06);
}
#scorecard-table tr:nth-child(odd) td:first-child{ background:#ffffff; }
#scorecard-table tr:nth-child(even) td:first-child{ background:var(--c-gray-50); }

/* Export: desactiva sticky */
body.exporting #scorecard-head th,
body.exporting #scorecard-table td:first-child{
  position:static !important; left:auto !important; top:auto !important; z-index:auto !important; box-shadow:none !important;
}


/* ===========================================================
   INPUTS NUMÉRICOS (incluye fix iOS) – UNIFICADO
=========================================================== */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button{ -webkit-appearance:none; margin:0; }
input[type=number]{ -moz-appearance:textfield; }

@supports (-webkit-touch-callout: none){
  input, select, textarea{ font-size:16px !important; }
  #scorecard-section input[type="number"], #summary-section input[type="number"]{ font-size:16px !important; }
}

/* Estilo de celdas numéricas en tabla (funciona con type=number o inputmode="numeric") */
table tbody td input[type="number"],
table tbody td input[inputmode="numeric"]{
  background:transparent; border:none; border-bottom:2px solid var(--c-gray-300);
  outline:none; padding:1px 2px; font-size:.9rem; max-width:32px; width:auto; text-align:center;
  transition: background-color .2s, border-color .2s;
}
table tbody td input[type="number"]:focus,
table tbody td input[inputmode="numeric"]:focus{
  background:#fff; border-bottom-color: var(--color-campo-primario, var(--c-primary));
}


/* ===========================================================
   SELECTS / TOM-SELECT / PÍLDORAS / SWITCH
=========================================================== */
#campo-select{
  background:#fff; font-weight:600; font-size:.97rem; min-width:140px; max-width:100%; padding:.5em 1em;
}
#campo-select option{ font-weight:normal; font-size:.97em; padding:.2em .5em; min-height:1em; }

/* Select pill (nativo accesible) */
.select-pill{ position:relative; display:block; width:100%; }
.select-pill select{
  -webkit-appearance:none; appearance:none; width:100%; border:1px solid var(--c-gray-300); border-radius:999px;
  padding:.6rem 2.25rem .6rem 1rem; background:#fff; color:var(--c-gray-800); font-weight:600; outline:none;
  transition:border-color .2s, box-shadow .2s, background .2s; box-sizing:border-box;
}
.select-pill::after{
  content:"▾"; position:absolute; right:12px; top:50%; transform:translateY(-50%); pointer-events:none; color:#6b7280; font-size:.95rem;
}
.select-pill select:hover{ background:#f9fafb; }
.select-pill select:focus{
  border-color:var(--color-campo-primario, var(--c-primary));
  box-shadow:0 0 0 2px color-mix(in srgb, var(--color-campo-primario, var(--c-primary)) 30%, transparent);
}

/* Tom Select dentro de select-pill (look pill + flecha) */
.select-pill .ts-control{
  position:relative; border:1px solid var(--c-gray-300); border-radius:999px;
  padding:.7rem 2.5rem .7rem 1rem; background:#fff; min-height:2.6rem; font-size:1.05rem; font-weight:700; color:var(--c-gray-800);
}
.select-pill .ts-control .item, .select-pill .ts-control input{ font-weight:700; }
.select-pill .ts-wrapper.focus .ts-control{
  border-color:var(--color-campo-primario, var(--c-primary));
  box-shadow:0 0 0 3px color-mix(in srgb, var(--color-campo-primario, var(--c-primary)) 28%, transparent);
}
.select-pill .ts-control::after{
  content:""; position:absolute; right:14px; top:50%; transform:translateY(-50%);
  width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; border-top:6px solid #6b7280;
  pointer-events:none; transition: transform .15s ease, border-top-color .15s ease;
}
.select-pill .ts-wrapper.focus .ts-control::after{
  transform:translateY(-50%) rotate(180deg); border-top-color:var(--color-campo-primario, var(--c-primary));
}
.ts-dropdown .ts-dropdown-input{ padding:.55rem .75rem; font-size:.98rem; }
.select-pill .ts-wrapper{ display:block; width:100%; }  /* asegura ancho completo */

/* Fallbacks para ocultar el select nativo cuando TS está activo */
select[data-ts-inited="1"]{
  position:absolute !important;
  opacity:0 !important;
  pointer-events:none !important;
  width:0 !important; height:0 !important;
  margin:0 !important; padding:0 !important; border:0 !important;
}
/* Por si falta la hoja oficial de Tom Select */
.ts-hidden-accessible{
  position:absolute !important;
  opacity:0 !important;
  pointer-events:none !important;
  width:0 !important; height:0 !important;
  margin:0 !important; padding:0 !important; border:0 !important;
}

/* Pills 9/18 y front/back */
.pill-group{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; width:100%; }
.pill-group--compact{ grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); }
.pill{ display:flex; align-items:center; border:1px solid var(--c-gray-300); border-radius:.75rem; width:100%; }
.pill input{ position:absolute; opacity:0; pointer-events:none; }
.pill span{
  padding:.6rem 1rem; display:inline-block; border-radius:.75rem; min-width:120px; width:100%; text-align:center;
  color:var(--c-gray-800); background:#fff; transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.pill input:focus + span{ box-shadow:0 0 0 2px color-mix(in srgb, var(--color-campo-primario) 35%, transparent); }
.pill input:checked + span{ background:var(--color-campo-primario); color:#fff; border-color:var(--color-campo-primario); }


/* Switch ventajas */
.switch{ display:inline-flex; align-items:center; gap:.5rem; user-select:none; }
.switch input{ position:absolute; opacity:0; pointer-events:none; }
.switch-track{
  width:48px; height:28px; border-radius:999px; background:var(--c-gray-300); position:relative; transition:background .2s; display:inline-block;
}
.switch-thumb{
  position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:999px; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.1); transition:transform .2s;
}
.switch input:checked + .switch-track{ background:var(--color-campo-primario); }
.switch input:checked + .switch-track .switch-thumb{ transform:translateX(20px); }
.switch-label{ color:#4b5563; }

/* “Guardar mi score” (label) */
/* después (≈18px) */
.player-identify-label{
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  color: var(--c-gray-800);
  line-height: 1.1;
}


/* ===========================================================
   HEADER / BANNERS / LOGO
=========================================================== */
#app-header{
  display:flex; justify-content:space-between; align-items:center; gap:16px; padding:8px 16px;
   margin-bottom: clamp(4px, 1.2vw, 16px) !important;;
}
#main-logo{
  width: 88px !important;   /* prueba 88–96 */
  height: 88px !important;
  background-image: none;    /* quita el zirandaro fijo */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
}
/* contenedores e imágenes */
#top-banner, #ad-banner, .banner-container{ width:100%; overflow:hidden; }
#top-banner-image, #banner-image, #ad-image{ display:block; max-width:100%; height:auto; object-fit:contain; }

/* Banner inferior */
#ad-banner.banner-container{
  line-height:0; width:100vw; max-width:100vw; padding:4px 0; margin:8px 0 24px 0; background:transparent; border-radius:0; text-align:center;
}
/* Bottom banner: misma lógica responsive que el top */
#ad-banner .banner-img{
  display:block; margin:0 auto;
  width: min(96vw, 1280px);   /* ocupa todo el ancho disponible sin pasarse */
  height: auto;                /* conserva proporción 1200×180 */
  max-height: none;            /* quita el tope que lo achicaba */
  border-radius:8px; box-shadow:0 2px 12px rgba(0,0,0,.1); cursor:pointer;
}


@media (min-width:640px){ #ad-banner.banner-container{ margin-top:0; } }

/* Separación mínima bajo top banner y título */
.container > header.text-center{ margin-bottom: 8px !important; }
#setup-section{ margin-top:8px !important; }
#setup-section h2{ margin-top:0 !important; }


/* ===========================================================
   AD POPUP
=========================================================== */
#ad-popup{
  display:none; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
  z-index:2000; background:transparent; padding:0; margin:0;
}
#ad-popup.visible{ display:block; }
#ad-popup #ad-image{
  max-width:90vw; max-height:90vh; width:auto; height:auto; display:block; border-radius:12px; box-shadow:0 4px 12px rgba(0,0,0,.3);
}
#ad-popup #close-ad-btn{
  position:absolute; top:-16px; right:-16px; background:#fff; border:none; border-radius:50%; font-size:28px; font-weight:bold; cursor:pointer;
  width:40px; height:40px; box-shadow:0 2px 6px rgba(0,0,0,.3); z-index:2100; display:flex; align-items:center; justify-content:center;
}
#ad-text{ display:none; }


/* ===========================================================
   FOOTER / FIRMAS / CAMPOS
=========================================================== */
#campo-footer{ background-color:var(--color-fondo-footer); color:var(--color-texto-footer); margin-top:12px; }
.footer-signature{
  position:absolute; bottom:10px; left:50%; transform:translateX(-50%);
  font-size:.80rem; font-family:'Georgia','Times New Roman',serif; color:rgba(255,255,255,.5);
  font-weight:400; letter-spacing:.05em; pointer-events:none; z-index:15; opacity:.85; text-shadow:0 1px 3px rgba(0,0,0,.12);
}

/* Botón/Clase de branding primario */
.bg-primary-700{ background-color: var(--color-campo-primario); color: var(--color-boton-texto); border-color: var(--color-boton-border); }
.bg-primary-700:hover{ background-color: var(--color-boton-hover); }

/* Texto destacados mediante utilidad */
.text-primary-800{ color: var(--color-campo-primario); }

/* Bordes y foco con branding */
.border-primary-500{ border-color: var(--color-campo-primario); }
.hover\:border-primary-500:hover{ border-color: var(--color-campo-primario); }
.focus\:ring-primary-500:focus{ --tw-ring-color: var(--color-campo-primario); }

/* Tee select */
#tee-select{
  min-height:2.5rem; height:auto; line-height:normal; white-space:nowrap;
  padding-top:.5rem; padding-bottom:.5rem; box-sizing:border-box;
}


/* ===========================================================
   SETUP SECTION (card + filas + stepper)
=========================================================== */
#setup-section{
  box-shadow:0 10px 28px rgba(0,0,0,.10), 0 3px 8px rgba(0,0,0,.06);
  border:1px solid #eceff3; background:#fff; border-radius:14px;
}
#setup-section h2{ margin-bottom:.5rem; line-height:1.2; }
#setup-section label.block{ margin-bottom:.5rem; }
#setup-section .mt-6{ margin-top:.5rem; }

#setup-section .controls-row{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }
#setup-section .controls-row > *{ min-width:0; }
#setup-section .controls-row label span{ white-space:normal; line-height:1.1; }

@media (max-width:480px){
  #setup-section .controls-row{ flex-direction:column; align-items:flex-start; }
}

/* Fila Modalidad + Ventajas */
#setup-section .mod-row{ display:flex; align-items:center; gap:10px; width:100%; }
#setup-section .mod-row .mod-select{ flex:0 1 65%; min-width:0; box-sizing:border-box; }
#setup-section .mod-row .switch{ flex:0 0 35%; display:flex; align-items:center; justify-content:flex-end; box-sizing:border-box; }
#setup-section .mod-row .select-pill{ width:100%; }
#setup-section .mod-row .select-pill select{ width:100%; box-sizing:border-box; }

@media (max-width:640px){
  #setup-section .mod-row{ flex-wrap:nowrap; gap:8px; }
  #setup-section .mod-row .mod-select{ flex:0 1 60%; }
  #setup-section .mod-row .select-pill select{ padding-right:2.5rem; }
}
@media (max-width:420px){
  #setup-section .mod-row{ flex-direction:column; align-items:stretch; gap:8px; }
  #setup-section .mod-row .mod-select,
  #setup-section .mod-row .switch{ flex:1 1 100%; justify-content:flex-start; }
}

/* Separadores suaves entre bloques */
#setup-section .form-block{ margin-top:8px; margin-bottom:10px; }

/* Stepper a ancho completo */
#players-stepper.stepper{
  display:grid; grid-template-columns:48px 1fr 48px; gap:8px; width:100%;
}
#players-stepper .stepper-btn{
  width:48px; height:44px; border-radius:.75rem; border:1px solid var(--c-gray-300);
  background:#fff; font-size:20px; line-height:1; cursor:pointer;
}
#players-stepper .stepper-input{
  width:100%; max-width:none; min-height:44px; text-align:center; padding:.75rem;
  border:1px solid var(--c-gray-300); border-radius:.75rem; outline:none; transition: box-shadow .2s, border-color .2s;
}
.stepper-input:focus{
  border-color:var(--color-campo-primario);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--color-campo-primario) 30%, transparent);
}

/* Acciones secundarias */
.actions-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; width:100%; }
.btn-secondary-pill{
  background:#fff; border:1px solid #e5e7eb; border-radius:999px;
  padding:.75rem 1rem; font-weight:600; box-shadow:0 1px 2px rgba(0,0,0,.04);
  width:100%; text-align:center;
}
.btn-secondary-pill:hover{ background:#f9fafb; }


/* ===========================================================
   LEADERBOARD – FILTROS / CHIPS
=========================================================== */
.h-10{ height:2.5rem; } .min-h-10{ min-height:2.5rem; }

#lb-campo-select{
  height:2.5rem; padding-top:.25rem; padding-bottom:.25rem; width:250px;
}
#lb-toggle-filtros{
  height:2.5rem; padding:.25rem .75rem; line-height:1.5rem; font-size:.97rem; font-weight:600;
  box-sizing:border-box; border:1px solid var(--c-gray-300); border-radius:.375rem; background:#fff;
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer; align-self:flex-end;
}
.lb-resumen{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.filter-chip{
  display:inline-flex; align-items:center; gap:.25rem; padding:.2rem .5rem; background:#f3f4f6; border:1px solid #e5e7eb;
  border-radius:999px; font-size:.8rem; color:#374151; white-space:nowrap;
}
.lb-filtros{ z-index:50; }
#lb-results-wrap{ padding-top: var(--lb-sticky-offset, 0px); }
.lb-filtros.collapsed .lb-avanzado{ display:none !important; }

/* Leaderboard: que Tom Select ocupe 100% y tenga altura de input */
#lb-filtros .ts-wrapper { display:block; width:100%; max-width:100%; }
#lb-filtros .ts-control { min-height: 2.5rem; border-radius: .75rem; }

/* Si no quieres el “look pill” global, al menos fuerza ancho al campo */
#lb-campo-select + .ts-wrapper,
#lb-rango + .ts-wrapper { display:block; width:100%; }




/* ===========================================================
   REGLAS – POPOVER (UNIFICADO)
=========================================================== */
#reglas-section.popover{
  position:fixed; z-index:10000; border-radius:12px; max-height:82dvh; overflow-y:auto; -webkit-overflow-scrolling:touch;
  /* Top/Left se asignan por JS */
}
#reglas-section.popover.show{
  display:block !important; transform: translateY(var(--reglas-offset-y));
}
#reglas-section .reglas-dialog{ overflow:auto; -webkit-overflow-scrolling:touch; scroll-behavior:auto; }
#reglas-arrow{
  z-index:10001; position:absolute; top:-8px; width:0; height:0;
  border-left:8px solid transparent; border-right:8px solid transparent; border-bottom:8px solid #1a1a1a;
}

/* Botón “Reglas Locales”: quita márgenes utilitarios y fija top/right */
#btn-reglas-locales{
  margin-top: 0 !important;
  margin-right: 0 !important;
  top: 6px;              /* antes ~12px por mt-3 */
  right: 8px;            /* antes ~12px por mr-3 */
}



/* ===========================================================
   TABLAS DE SCORECARD & RESUMEN
=========================================================== */
#scorecard-section table, #summary-section table{
  border-collapse:collapse; width:100%; border:1px solid #cbd5e1; font-size:.875rem;
}
#scorecard-section th, #scorecard-section td,
#summary-section th, #summary-section td{
  border:1px solid #cbd5e1; padding:.3em .5em; text-align:center;
}
#scorecard-section tr:nth-child(even),
#summary-section tr:nth-child(even){ background:var(--c-gray-50); }
#scorecard-section input[type="number"], #summary-section input[type="number"]{
  border:1px solid #cbd5e1; border-radius:4px; width:3em; text-align:center; padding:2px 4px; font-size:.9rem;
}
#scorecard-section input[type="number"]:focus, #summary-section input[type="number"]:focus{
  border-color: #d26215; outline:none; box-shadow:0 0 3px #d26215aa;
}

/* === FIX: header sticky del scorecard sin “doble” ni desfase === */
/* Anula el sticky del THEAD que viene desde el HTML (Tailwind) */
#scorecard-section thead{
  position: static !important;
}

/* Hace sticky cada TH y le da fondo/z-index para que tape la fila de abajo */
#scorecard-section thead th{
  position: sticky;
  top: 0;
  z-index: 20;
  background: #0f172a; /* mismo tono que tu bg gris oscuro */
  color: #fff;
}

/* Detalle visual para que no parezca que hay dos cabeceras */
.table-scroller thead th{
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
}

/* (Opcional) Ajuste de padding para compactar la cabecera */
#scorecard-section th, #scorecard-section td{
  padding:.35em .5em;
}



/* ===========================================================
   OCULTAR EN PDF / PRINT
=========================================================== */
.hide-for-pdf{ display:none !important; }
#campo-select-container.hidden-campo-select{
  display:none !important; visibility:hidden; height:0; overflow:hidden; margin:0; padding:0;
}

@media print{
  body *{ visibility:hidden; }
  #summary-section, #summary-section *{ visibility:visible; }
  #summary-section{
    position:absolute; top:0; left:0; width:100%; margin:0; padding:0 10mm;
    font-size:12pt; color:black !important; background:white !important; page-break-inside:avoid;
  }
  #summary-section table{ border-collapse:collapse; width:100%; page-break-inside:avoid; }
  #summary-section th, #summary-section td{ border:1px solid #000; padding:6px 8px; }
  #summary-section th{ background:#d3d3d3; -webkit-print-color-adjust:exact; }
  #summary-section button, #summary-section .no-print{ display:none !important; }
  header, footer, nav{ display:none !important; }
}

/* ===== Compact header + popover + padding lateral (sin tocar #btn-reglas-locales) ===== */

/* Offset del popover; solo eje Y */
:root { --reglas-offset: 52px; }

/* 1) Header del app (logo + banner) compacto */
#app-header{
  margin-bottom: clamp(6px, 1.2vw, 14px) !important;
  padding: 6px 12px;
}

/* 2) Wrapper principal: padding lateral garantizado + vertical compacto
      (no afecta footer ni top header porque no están dentro de este .container) */
body > .container{
  /* lateral */
  padding-left: clamp(12px, 4vw, 24px) !important;
  padding-right: clamp(12px, 4vw, 24px) !important;
  /* vertical */
  padding-top: 6px !important;
  padding-bottom: 12px !important;
}

/* 3) Header del título */
body > .container > header.text-center{
  position: relative;
  margin-bottom: 6px !important;
  padding-top: 2px;
}

/* 4) Título y subtítulo compactos */
#campo-titulo   { line-height: 1.02; margin-bottom: 6px; }
#campo-subtitulo{ margin-top: 2px;  margin-bottom: 8px; font-weight: 500; }

/* 5) Card principal sin margen extra arriba */
#setup-section{ margin-top: 6px !important; }

/* 6) Popover: solo desplazar en Y; el JS sigue controlando top/left */
#reglas-section.popover.show{
  display: block !important;
  transform: translate3d(0, var(--reglas-offset), 0) !important;
  transform-origin: top center;
  will-change: transform;
}

/* 7) Ajustes móviles */
@media (max-width: 480px){
  #app-header{ margin-bottom: 8px !important; }
  body > .container{
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-top: 6px !important;
  }
  :root{ --reglas-offset: 48px; }
}

/* ===== Utilities que usa tu HTML y faltaban ===== */
/* Lateral */
.px-4 { padding-left: 1rem; padding-right: 1rem; }
@media (min-width: 640px){
  .sm\:px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
}
@media (min-width: 768px){
  .md\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
}

/* Superior */
.pt-4 { padding-top: 1rem; }
@media (min-width: 640px){
  .sm\:pt-5 { padding-top: 1.25rem; }
}
@media (min-width: 768px){
  .md\:pt-6 { padding-top: 1.5rem; }
}

/* Respaldo por si alguna regla pisa las utilidades (solo el contenedor principal) */
body > .container{
  padding-left: clamp(12px, 4vw, 24px) !important;
  padding-right: clamp(12px, 4vw, 24px) !important;
}

#lb-results-wrap { width: 100%; max-width: none; }
#lb-resultados { list-style: none; padding-left: 0; margin: 0; width: 100%; }
#lb-resultados > li { width: 100%; }


#campo-footer a.footer-mail { color:#fff; text-decoration:underline; }
/* En el footer, todos los enlaces subrayados */
#campo-footer a { text-decoration: underline; }

/* Utilidad por si usas class="underline" en otros lados */
.underline { text-decoration: underline !important; }

.match-status-top{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .5rem 1rem;
  border-radius: .5rem;
  font-weight: 700;
  font-size: 1rem;
  background: rgba(29,34,20,0.03); /* suave */
  color: #1d2214;
  margin-bottom: .5rem;
  min-height: 40px;
}

/* variantes para color según estado */
.match-status-top.lead { background: rgba(109,126,74,0.12); color: #3a4b20; }
.match-status-top.down { background: rgba(255,200,200,0.08); color: #7a2626; }
.match-status-top.draw { background: rgba(200,200,200,0.06); color: #333; }

/* si quieres que quede pegado arriba del viewport dentro de la sección */
#scorecard-section.sticky-header .match-status-top{
  position: sticky;
  top: 0;
  z-index: 40;
}

/* ====== Modal de Club ====== */
.club-modal.hidden { display: none; }
.club-modal { position: fixed; inset: 0; z-index: 3000; }
.club-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.35); }
.club-modal__panel {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(92vw, 420px); background: #fff; border-radius: 12px; padding: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.2);
}

.table-scroll {
  max-height: 70vh;          /* alto visible */
  overflow-y: auto;          /* scroll vertical */
  overflow-x: auto;          /* por si hay muchas columnas */
  border-radius: 10px;
}

.table-scroll table { border-collapse: separate; border-spacing: 0; width: 100%; }

.table-scroll thead th {
  position: sticky;
  top: 0;
  background: #1f2937;       /* gris oscuro */
  color: #fff;
  z-index: 2;
}
/* Tabs */
.tab-btn{
  padding:.5rem .75rem;
  border-radius:.5rem;
  border:1px solid #e5e7eb;
  background:#fff;
  color:#111827;
  font-weight:600;
}
.tab-btn:hover{ background:#f9fafb; }
.tab-active{
  background:#1f2937 !important;
  color:#fff !important;
  border-color:#1f2937 !important;
}
/* Board de Match (una sola definición) */
.match-board{ display:flex; flex-direction:column; gap:.5rem; }
.match-row{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap:12px;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:10px 12px;
  background:#ffffff;
}
.match-row.draw{ background:#f8fafc; }
.match-row.left{ background:linear-gradient(90deg, rgba(37,99,235,.12), transparent); }
.match-row.right{ background:linear-gradient(270deg, rgba(16,185,129,.12), transparent); }
.match-row .side{ display:flex; align-items:center; gap:.75rem; }
.match-row .names{ line-height:1.1; }
.match-row .name{ font-weight:800; text-transform:uppercase; letter-spacing:.02em; }
.match-row .hc{ font-size:.75rem; color:#64748b; }
.match-row .badge{
  min-width:56px; text-align:center; font-weight:800;
  background:#0f172a; color:#fff; border-radius:10px; padding:.25rem .5rem;
}
.match-row .center{ text-align:center; }
.match-row .center .hole{ font-weight:800; letter-spacing:.04em; }
.match-dormie{ display:inline-block; margin-top:2px; font-size:.75rem; color:#854d0e; }
.match-final{ display:block; margin-top:2px; font-weight:800; color:#111827; }

/* SUMMARY: scroll horizontal cuando hay muchos jugadores */
#summary-section #summary-content{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Deja que la tabla crezca más que el panel para que aparezca el scroll */
#summary-section #summary-content > table{
  width: auto;
  min-width: max-content;
  table-layout: auto;
  white-space: nowrap; /* evita wraps raros en nombres */
}

.chip{display:inline-block;padding:.2rem .5rem;border:1px solid #ddd;border-radius:9999px;font-weight:600}
.chip-muted{opacity:.75}
.table-scroll{overflow:auto}

/* ===== Bottom Banner fijo (dock-to-container) ===== */
#ad-banner-fixed{
  position: fixed;
  left: 0; right: 0;
  bottom: env(safe-area-inset-bottom, 0px);
  z-index: 1020;
  line-height: 0;
  width: 100vw; max-width: 100vw;
  padding: 4px 0;
  background: transparent;
  text-align: center;
  display: none; /* se muestra por JS */
}
#ad-banner-fixed .banner-img{
  display:block; margin:0 auto;
  width: min(96vw, 1280px);
  height: auto;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,.1);
  cursor: pointer;
}
body.has-fixed-banner{
  /* JS setea --ad-fixed-h con la altura real del banner */
  padding-bottom: calc(var(--ad-fixed-h, 100px) + env(safe-area-inset-bottom, 0px) + 8px);
}

@media print {
  .no-cut {
    break-inside: avoid;
    page-break-inside: avoid;            /* compat */
    -webkit-column-break-inside: avoid;  /* WebKit */
  }
}

@media (min-width: 1024px){
  #ad-banner-fixed { display:none !important; }
  body.has-fixed-banner { padding-bottom: 0 !important; }
}

/* === PATCH: Ventajas en SUMMARY (por hoyo y por score) + export === */

/* 1) En SUMMARY, la 1ª columna y cualquier celda con SI reservan hueco a la derecha */
#summary-section #summary-content tbody tr td:first-child,
#summary-section td.cell-hole-with-ventaja{
  position: relative;
  padding-right: 1.35em;     /* evita que la ventaja empuje el contenido */
  white-space: nowrap;
  vertical-align: middle;
}

/* 2) Posiciona la ventaja arriba-derecha dentro de la celda del SUMMARY */
#summary-section #summary-content .ventaja-number{
  position: absolute;        /* sobrescribe la regla genérica de #summary-content */
  top: .18em;
  right: .25em;
  font-size: .70em;
  line-height: 1;
  color: var(--c-amber);
  margin: 0;                 /* anula posibles márgenes previos */
  pointer-events: none;
  -webkit-user-select: none; user-select: none;
  text-shadow: 0 0 0 currentColor; /* nítido en export/html2canvas */
}

/* 3) Export/Print: refuerza posición y color */
body.exporting .ventaja-number{
  position: absolute !important;
  color: var(--c-amber) !important;
  text-shadow: 0 0 0 currentColor !important;
  z-index: 2 !important;
}
@media print{
  #summary-section .ventaja-number{
    position: absolute !important;
    color: var(--c-amber) !important;
    text-shadow: 0 0 0 currentColor !important;
  }
}

/* SUMMARY — ancho mínimo por columna */
#summary-section #summary-content table :is(th, td){
  min-width: 56px;   /* ajusta 48–72px según necesites */
  white-space: nowrap;
}

/* Si no caben, permite desplazamiento horizontal */
#summary-section #summary-content{ overflow-x: auto; }

/* Efecto entrada al volverse activa */
.slide {
  opacity: 0;
  transform: translateY(8px) scale(.985);
  filter: blur(1px);
  transition: opacity 480ms cubic-bezier(.2,.7,.2,1),
              transform 480ms cubic-bezier(.2,.7,.2,1),
              filter 480ms cubic-bezier(.2,.7,.2,1);
}
.slide.is-active {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}