/* ============================================================
   3Pelotas — Brand & Color Overrides
   Loaded after TailAdmin's style.css
   ============================================================ */


/* ── 1. Brand palette (green) ── */
:root {
 /* --color-brand-50:  #d1f5e0;*/
  --color-brand-50:  #f6f8f5;
  --color-brand-100: #b3ebc8;
  --color-brand-200: #7edba3;
  --color-brand-300: #4fc882;
  --color-brand-400: #30b565;
  --color-brand-500: #22964e;
  --color-brand-600: #1b7a3f;
  --color-brand-700: #155f31;
  --color-brand-800: #104524;
  --color-brand-900: #0b2e18;
  --color-brand-950: #06190d;
}


/* ── 2. Light mode: tinte verde sutil en superficies claras ── */
:root {
  --color-gray-50:  #f6f8f5;
  --color-gray-100: #edf1ec;
  --color-gray-200: #dde3db;
  --color-gray-300: #c5cec4;
}


/* ── 3. Dark mode: escala estándar TailAdmin (grises neutros) ── */
.dark {
  --color-gray-50:  #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;
  --color-gray-950: #030712;
  --color-gray-dark: #1d2939;
}


/* ── 11. Focus ring: verde brand ── */
select:focus,
input:focus,
textarea:focus {
  outline: none;
  border-color: var(--color-brand-500) !important;
}


/* ── 12. Utility extras (not in compiled TailAdmin) ── */
.max-w-4xl { max-width: 800px; }
.max-w-5xl { max-width: 1000px; }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* text-theme-xxs — 10px, más chico que text-theme-xs (12px) */
.text-theme-xxs {
  font-size: 10px;
  line-height: 14px;
}


/* ── 13. Raised-decimal money formatting ── */
.money-raised-decimal .money-decimal {
  font-size: 0.6em;
  vertical-align: super;
  opacity: 0.75;
}


/* ── 14. Scorekeeper mini board ── */
.sk-board {  color: #1a1a1a; }
.dark .sk-board {  color: #fff; }

.sk-board .sk-muted { color: #999; }
.dark .sk-board .sk-muted { color: rgba(255,255,255,.4); }

.sk-board .sk-text { color: #333; }
.dark .sk-board .sk-text { color: #fff; }

.sk-board .sk-divider { background: #ddd; opacity: 0.5; }
.dark .sk-board .sk-divider { background: #f7c600; opacity: 0.3; }

.sk-board .sk-serve { background: #f7c600; }

.sk-board .sk-pts-bg { background: rgba(0,0,0,.06); }
.dark .sk-board .sk-pts-bg { background: rgba(255,255,255,.1); }

.sk-board .sk-set-current { background: rgba(0,0,0,.06); }
.dark .sk-board .sk-set-current { background: rgba(255,255,255,.08); }

.sk-board .sk-pts-text { color: #2768F5; }
.dark .sk-board .sk-pts-text { color: #7cb3ff; }

.sk-board .sk-name {
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.1;
}

.sk-board .sk-row {
  display: flex;
  align-items: center;
  padding: 0;
  margin: 0;
  line-height: 1;
}

.sk-board .sk-serve-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #f7c600;
}

.sk-board .sk-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  border-radius: 50%;
  background: #fff;
  color: #111827;
  border: 1px solid #e5e7eb;
}
.dark .sk-board .sk-pill {
  background: #1f2937;
  color: #f9fafb;
  border-color: #374151;
}

.sk-side-tag {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 8px;
  font-weight: 800;
  color: #fff;
  padding: 1px 5px;
  border-radius: 4px;
  z-index: 1;
  line-height: 1.2;
}

.sk-board .sk-pts-cell {
  width: 56px;
  text-align: center;
  font-size: 28px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  border-radius: 8px;
  padding: 2px 0;
}

.sk-board .sk-set-cell {
  width: 36px;
  text-align: center;
  font-size: 22px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  border-radius: 6px;
}

.sk-board .sk-header-cell {
  width: 36px;
  text-align: center;
  font-size: 10px;
  font-weight: 600;
}

.sk-board .sk-names-col { width: 140px; flex-shrink: 0; padding-left: 6px; }
.sk-board .sk-serve-col { width: 24px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.sk-board .sk-pts-col { width: 56px; }

/* ── Mini marcador (réplica TV escalada) ── */
.sk-mini-row {
  display: flex;
  align-items: center;
  line-height: 2;
}
.sk-mini-serve {
  width: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sk-board .sk-mini-names {
  flex: 1;
  min-width: 0;
  padding-left: 4px;
  white-space: nowrap;
  overflow: hidden;
}
.sk-mini-name {
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  line-height: 1.6;
}
.sk-mini-pts {
  width: 40px;
  flex-shrink: 0;
  text-align: center;
}
.sk-mini-pts-cell {
  width: 40px;
  flex-shrink: 0;
  text-align: center;
  font-size: 20px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  border-radius: 6px;
  padding: 2px 0;
}
.sk-mini-team {
  padding: 4px 0;
}
.sk-board .sk-serving {
  color: #f7c600;
}
.sk-mini-pill {
  margin-right: 8px;
  vertical-align: middle;
}
.sk-mini-name-inline {
  font-size: 12px;
  font-weight: 700;
  vertical-align: middle;
  display: inline-block;
  white-space: nowrap;
}
.sk-mini-names {
  white-space: nowrap;
  overflow: hidden;
  min-width: 0;
}

/* ── 15. Scorekeeper punto buttons ── */
.sk-punto-btn {
  transition: background-color .15s, border-color .15s, color .15s, transform .1s, box-shadow .15s;
}
.sk-punto-btn:active:not(:disabled) {
  transform: scale(.96);
}

/* Botones de marcación — estilo brand del sistema (ambos lados iguales) */
.sk-punto-a,
.sk-punto-b {
  border-color: var(--color-brand-500);
  background: var(--color-brand-500);
  color: #fff;
}
.sk-punto-a:hover:not(:disabled),
.sk-punto-b:hover:not(:disabled) {
  border-color: var(--color-brand-600);
  background: var(--color-brand-600);
  box-shadow: 0 0 20px rgba(34,150,78,.25);
}
.sk-punto-a:active:not(:disabled),
.sk-punto-b:active:not(:disabled) {
  border-color: var(--color-brand-700);
  background: var(--color-brand-700);
  box-shadow: 0 0 28px rgba(34,150,78,.35);
}