/* =========================
   BASE Y LAYOUT
========================= */
* {
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
  background: #f4f4f4;
  margin: 0;
}

.wrap {
  max-width: 1100px;
  margin: 20px auto;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.10);
}

.hidden {
  display: none !important;
}

/* util */
.is-hidden {
  display: none !important;
}

/* =========================
   HEADER
========================= */
header h1 {
  font-size: 22px;
  color: #2c3e50;
  margin: 0 0 10px 0;
  line-height: 1.2;
  text-align: left;
  letter-spacing: -0.5px;
  border-bottom: 2px solid #eee;
  padding-bottom: 10px;
}

@media (max-width: 600px) {
  header h1 {
    font-size: 18px;
  }
}

/* =========================
   NAVEGACIÓN Y TABS
========================= */
.nav {
  display: flex;
  gap: 10px;
  margin: 20px 0;
  flex-wrap: wrap;
}

.tab {
  padding: 10px 20px;
  cursor: pointer;
  border: 1px solid #ccc;
  background: #fff;
  border-radius: 5px;
  font-weight: bold;
  white-space: nowrap;
}

.tab.active {
  background: #007bff;
  color: #fff;
  border-color: #007bff;
}

/* (para el HTML nuevo; si no existen no molestan) */
.tab-grupos {
  color: gold;
  font-weight: bold;
}

.tab-bis {
  background: #fff3cd;
  color: #856404;
  font-weight: bold;
  border: 1px solid #ffeeba;
}

/* =========================
   GRILLAS / TARJETAS / TOOLBAR
========================= */
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.card {
  border: 1px solid #ddd;
  padding: 15px;
  border-radius: 5px;
  background: #fff;
}

.toolbar {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

/* =========================
   TABLAS Y FORMULARIOS
========================= */
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

th,
td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
  font-size: 13px;
}

th {
  background: #f8f8f8;
}

.field {
  margin-bottom: 10px;
}

label {
  display: block;
  font-weight: bold;
  font-size: 12px;
  margin-bottom: 4px;
}

input,
select {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* clases del HTML nuevo */
.filter-row {
  margin-bottom: 10px;
  display: flex;
  gap: 5px;
}

.filter-select {
  flex: 1;
}

.form-row {
  margin-bottom: 10px;
}

.form-label-strong {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
}

.muted {
  color: #666;
}

.hint-muted {
  color: gray;
}

.field-highlight {
  background: #f0f4f8;
  padding: 10px;
  border-radius: 4px;
  border: 1px solid #d1d9e0;
}

.select-strong {
  width: 100%;
  padding: 8px;
  font-weight: bold;
}

.cronograma-small {
  font-size: 11px;
}

/* =========================
   BOTONES GENERALES
========================= */
.btn {
  padding: 10px 15px;
  cursor: pointer;
  border-radius: 4px;
  border: 1px solid #ccc;
  font-weight: bold;
  background: #fff;
}

.btn.primary {
  background: #28a745;
  color: #fff;
  border: none;
}

.btn-danger {
  background: #ff4444;
  color: #fff;
  border: none;
}

.hidden-on-load {
  display: none;
}

.actions {
  display: flex;
  gap: 10px;
}

/* PISTAS RAZAS - Botones Pista cobre */
#viewPistas .btn.primary {
  background: linear-gradient(180deg, #d4874a 0%, #b87333 70%, #8a4b1c 100%) !important;
  border: 1px solid #6f3b15 !important;
  color: #fff !important;
}


/* =========================
   STATUS
========================= */
.status {
  background: #e9ecef;
  padding: 10px;
  font-size: 12px;
  border-radius: 4px;
  border: 1px solid #dee2e6;
}

/* =========================
   BOTONERAS DE OPCIONES (RAZAS/GRUPOS/JUECES)
========================= */
.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 5px;
}

.btn-opt {
  padding: 10px 14px;
  font-size: 0.85em;
  border: 1px solid #ced4da;
  background: #fff;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.btn-opt:hover {
  background: #f8f9fa;
  border-color: #adb5bd;
}

/* Activos */
.btn-juez-pista.active,
.btn-juez-grupo.active,
.btn-opt.active {
  background: linear-gradient(180deg, #d4874a 0%, #b87333 70%, #8a4b1c 100%) !important;
  color: #fff !important;
  border-color: #6f3b15 !important;
  font-weight: bold;
  box-shadow: 0 4px 8px rgba(184, 115, 51, .35) !important;
}

/* Multi (si lo usás) */
.btn-opt.multi.active {
  background: #28a745 !important;
  color: #fff !important;
  border-color: #1e7e34 !important;
  box-shadow: 0 0 8px rgba(40, 167, 69, 0.40);
}

/* =========================
   LISTADOS DE INSCRIPTOS
========================= */
.list-group-header {
  background: #333;
  color: #fff;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
  margin-top: 15px;
  border-radius: 4px;
}

.list-breed-header {
  background: #e1f5fe;
  color: #0277bd;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: bold;
  border-left: 4px solid #0277bd;
  margin-top: 5px;
}

.list-cat-header {
  background: #f1f8e9;
  color: #33691e;
  padding: 2px 10px;
  font-size: 16px;
  font-weight: 600;
  font-style: italic;
  border-left: 4px solid #33691e;
}

.list-filters {
  display: flex;
  gap: 5px;
  margin-bottom: 10px;
  padding: 5px;
  background: #eee;
  border-radius: 4px;
}

.hint-text {
  font-size: 11px;
  color: #666;
  font-style: italic;
  margin-top: 2px;
}

/* =========================
   JUZGAMIENTO COMPACTO
========================= */
.dog-card-compact {
  padding: 8px 10px !important;
  border-left-width: 4px !important;
  margin-bottom: 8px;
  border: 1px solid #eee;
  border-radius: 6px;
}

.dog-flex-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
}

.dog-ident {
  font-size: 1.1em;
  font-weight: bold;
}

.btn-group-inline {
  display: flex;
  gap: 2px;
}

.btn-xs {
  padding: 4px 8px;
  font-size: 0.85rem;
  font-weight: 600;
  border: 1px solid #ccc;
  background: #f9f9f9;
  cursor: pointer;
  border-radius: 4px;
  min-width: 32px;
  text-align: center;
}

.btn-xs.active {
  background: #1a73e8;
  color: #fff;
  border-color: #1557b0;
}

/* Puestos (si viene por contenedor) */
.puesto-btns .btn-xs {
  background: #f9f9f9;
  color: #333;
  border: 1px solid #ccc;
}

.puesto-btns .btn-xs.active {
  background: #1a73e8;
  color: #fff;
  border-color: #1557b0;
}

/* =========================
   CRONOGRAMA DE PISTAS
========================= */
.cronograma-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid #eee;
  background: #fff;
  margin-bottom: 5px;
  border-radius: 4px;
  border-left: 4px solid #007bff;
}

.btn-del {
  background: #ff4444;
  color: #fff;
  border: none;
  padding: 2px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  font-size: 14px;
}

/* =========================
   BANNERS (BIS / GRUPOS)
========================= */
.info-banner {
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 4px;
  border: 1px solid #ddd;
  background: #f8f9fa;
}

.info-banner-grupos {
  background: #fff3cd;
  border-color: #ffeeba;
}

.info-banner-bis {
  background: #fffbf0;
  border-color: #d4af37;
}

/* botón BIS “open” */
.btn-bis-open {
  width: 100%;
  margin-top: 15px;
  background: #d4af37;
  border: none;
  color: #111;
}

/* =========================
   SPLASH SCREEN
========================= */
#splashScreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999;
  transition: opacity 0.6s ease;
}

#splashScreen.hidden {
  opacity: 0;
  visibility: hidden;
}

.splash-content {
  text-align: center;
  width: 90%;
  max-width: 400px;
}

.splash-logo {
  width: 100%;
  max-width: 280px;
  height: auto;
  margin-bottom: 25px;
  border-radius: 8px;
}

.splash-main-title {
  font-family: sans-serif;
  color: #2c3e50;
  font-size: 1.3em;
  font-weight: 600;
  margin: 10px 0 25px 0;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.loading-bar-container {
  width: 100%;
  height: 6px;
  background: #f0f0f0;
  border-radius: 10px;
  overflow: hidden;
}

.loading-bar {
  width: 40%;
  height: 100%;
  background: #2c3e50;
  animation: loadingProgress 1.5s infinite ease-in-out;
}

@keyframes loadingProgress {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(250%);
  }
}

.loading-text {
  margin-top: 15px;
  font-size: 14px;
  color: #888;
}

.splash-footer {
  margin-top: 40px;
  font-size: 12px;
  color: #aaa;
}

/* =========================
   RESPONSIVE
========================= */
#contCatalogos,
table {
  overflow-x: auto;
}

#contCatalogos table {
  min-width: 520px;
}

@media (max-width: 900px) {
  .wrap {
    margin: 0;
    border-radius: 0;
  }

  .grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .wrap {
    padding: 12px;
  }

  .toolbar {
    flex-direction: column;
  }

  .toolbar select,
  .toolbar button {
    width: 100%;
  }

  .nav {
    gap: 8px;
    margin: 12px 0;
  }

  .tab {
    padding: 10px 12px;
    width: 100%;
    text-align: center;
  }

  .btn {
    width: 100%;
  }

  .actions {
    flex-direction: column;
    gap: 8px;
  }

  input,
  select {
    font-size: 16px;
  }

  .btn-opt {
    width: 100%;
    justify-content: center;
  }

  .btn-group {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .btn-group-inline {
    flex-wrap: wrap;
  }

  .dog-flex-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* =========================
   EFECTO CONFLICTO (si lo usás)
========================= */
@keyframes warningFlash {
  0% {
    background-color: transparent;
  }

  50% {
    background-color: #ffcccc;
  }

  100% {
    background-color: transparent;
  }
}

.conflict-flash {
  animation: warningFlash 0.8s ease-in-out;
}

/* =========================
   JUECES: banderas (si lo usás)
========================= */
.judge-country {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #445;
  margin-top: 4px;
  opacity: 0.95;
}

.judge-flag {
  font-size: 16px;
  line-height: 1;
}

/* =============================================================================
   INSCRIPCIONES: RAZA + ITEM PERRO (MEJORADO)
   (NO TOCADO — solo reubicado con orden visual)
   ============================================================================= */

/* 1) Encabezado de RAZA */
#viewInscripciones .list-breed-header {
  background: linear-gradient(135deg, #fdfcfb 0%, #f3f4f6 100%);
  color: #1f2937;
  padding: 12px 16px;
  margin: 18px 0 8px 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* 2) Tarjeta de cada PERRO */
#viewInscripciones .insc-item {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  transition: transform .08s ease, box-shadow .12s ease, border-color .12s ease;
}

#viewInscripciones .insc-item:hover {
  transform: translateY(-1px);
  border-color: #cbd5e1;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10);
}

/* Número (#1, #2, etc) */
#viewInscripciones .insc-num {
  display: inline-block;
  font-weight: 800;
  color: #111827;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  padding: 3px 10px;
  margin-right: 8px;
}

/* Descriptor “Macho | Cachorro” */
#viewInscripciones .insc-meta {
  color: #374151;
  font-weight: 600;
}

/* =========================================================
   PISTAS RAZAS – COBRE EXACTO (estructura igual al ejemplo)
   (ÚNICO bloque que toca esta pestaña)
   ========================================================= */


/* =========================================================
   esta parte la cambio el chat para forzar vista 1 col en celus
   antes habia #viewPistas .grid{
  grid-template-columns: 480px 1fr !important;
  gap: 5px !important;
  align-items: start !important;
}
   ========================================================= */

#viewPistas .grid {
  display: grid !important;
  grid-template-columns: 480px 1fr !important;
  gap: 5px !important;
  align-items: start !important;
}

/* RESPONSIVE SOLO PARA PISTAS RAZAS */
@media (max-width: 900px) {
  #viewPistas .grid {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   ========================================================= */

#viewPistas #panelJuzgamiento {
  background: #fffaf5 !important;
  border-radius: 18px !important;
  padding: 22px !important;
  border: 1px solid rgba(184, 115, 51, .25) !important;
}

/* ===== CARD PERRO ===== */

/*
=============================================================================
MÓDULO: PISTAS RAZAS - OPTIMIZACIÓN VISUAL (COBRE PRO)
-----------------------------------------------------------------------------
DESCRIPCIÓN: 
Ajustes de compactación para mejorar la densidad de datos en pantalla y 
jerarquización de categorías para una lectura rápida en pista.

SECCIONES:
1. ESTRUCTURA DE TARJETA: Reducción de padding y márgenes.
2. ESPACIADO INTERNO: Ajuste de aire entre filas de calificación y títulos.
3. BOTONERAS: Escalamiento hacia abajo para botones de Puesto, Calif y Títulos.
4. CATEGORÍAS: Aumento de tamaño para headers (Cachorro, Adulto, etc.).
=============================================================================


/* 1) Tarjeta más baja (menos alto) */
#viewPistas .dog-card-compact {
  background: #ffffff !important;
  border: 1px solid rgba(184, 115, 51, .35) !important;
  border-left: 6px solid #b87333 !important;
  border-radius: 14px !important;
  padding: 10px 14px !important;
  /* antes 16px 20px */
  margin-bottom: 10px !important;
  /* antes 14px */
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  /* antes 14px */
}


/* 4) Categoría separadora más grande (Cachorro / Joven / Adulto, etc) */
#viewPistas .list-cat-header {
  font-size: 18px !important;
  /* antes 16px global */
  padding: 6px 12px !important;
  /* un poco más de presencia */
  font-weight: 800 !important;
}

/* ===== FILA SUPERIOR (# + texto + puestos) ===== */

#viewPistas .dog-flex-row {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: center !important;
}

#viewPistas .dog-flex-row>div:first-child {
  display: flex !important;
  align-items: baseline !important;
  gap: 10px !important;
  font-weight: 800 !important;
  color: #3a1e0b !important;
}

#viewPistas .puesto-btns {
  display: flex !important;
  gap: 8px !important;
}

#viewPistas .puesto-btns .btn-xs {
  width: 38px !important;
  /* BOTONES MAS CHICOS antes 40 */
  height: 38px !important;
  /* BOTONES MAS CHICOS antes 40 */
  border-radius: 50% !important;
  font-size: 13px !important;
  /* BOTONES MAS CHICOS antes 14 */
  font-weight: 800 !important;
  padding: 0 !important;
}

/* ===== FILA CALIFICACIÓN ===== */

/* 2) Menos aire entre filas internas */
#viewPistas .calif-row {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 10px !important;
  /* Menos aire entre filas internas antes antes 14px */
  border-top: 1px solid rgba(184, 115, 51, .15) !important;
  padding-top: 8px !important;
  /* Menos aire entre filas internas antes 10px */
}

#viewPistas .calif-label {
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #b87333 !important;
  text-transform: uppercase !important;
}

#viewPistas .btn-group-inline {
  display: flex !important;
  gap: 8px !important;
}

#viewPistas .btn-group-inline .btn-xs {
  height: 30px !important;
  /* antes 32 */
  min-width: 38px !important;
  /* antes 40 */
  border-radius: 8px !important;
  font-size: 11px !important;
  /* antes 12 */
  font-weight: 800 !important;
  padding: 0 10px !important;
}

/* ===== FILA TÍTULOS ===== */

#viewPistas .titulos-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  justify-content: flex-end !important;
  border-top: 1px dashed rgba(184, 115, 51, .2) !important;
  padding-top: 10px !important;
  /* antes 12px */
}

#viewPistas .titulos-row .btn-xs {
  height: 20px !important;
  /* 22 antes 24 */
  padding: 0 10px !important;
  /*0 8 antes 0 10 */
  font-size: 8px !important;
  /* 9 antes 10 */
  border-radius: 14px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  min-width: auto !important;
}

/* ===== BOTONES BASE (solo en viewPistas) ===== */

#viewPistas .btn-xs {
  background: #fff !important;
  border: 1px solid rgba(184, 115, 51, .4) !important;
  color: #3a1e0b !important;
  transition: .2s !important;
}

#viewPistas .btn-xs.active {
  background: linear-gradient(180deg, #d4874a 0%, #b87333 70%, #8a4b1c 100%) !important;
  color: #fff !important;
  border-color: #6f3b15 !important;
  box-shadow: 0 4px 8px rgba(184, 115, 51, .3) !important;
}


/* Destacar nombre de raza */
#viewPistas .juzg-header-raza {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #6f3b15 !important;
  background: linear-gradient(90deg, #f3e3d3 0%, #ffffff 100%) !important;
  padding: 8px 14px !important;
  border-left: 6px solid #b87333 !important;
  border-radius: 8px !important;
  margin: 10px 0 6px 0 !important;
}



/* TAB PISTAS RAZAS - estilo cobre */
#navPistas.active {
  background: linear-gradient(180deg, #d4874a 0%, #b87333 70%, #8a4b1c 100%) !important;
  border-color: #6f3b15 !important;
  color: #fff !important;
}



/* =========================================================
   PISTAS GRUPOS – PLATA (ÚNICO bloque que toca esta pestaña)
   ========================================================= */

/* PISTAS GRUPOS (PLATA): botones activos SOLO en esta pestaña */
#viewPistasGrupos .btn-opt.active,
#viewPistasGrupos .btn-juez-grupo.active {
  background: linear-gradient(180deg, #f5f7fa 0%, #cfd6de 60%, #9aa3ad 100%) !important;
  color: #1f2937 !important;
  border-color: #7b8794 !important;
  box-shadow: 0 4px 10px rgba(120, 130, 140, .35) !important;
}


/* PISTAS GRUPOS – Botones puestos PLATA */
#viewPistasGrupos .btn-xs {
  background: #f2f2f2 !important;
  border: 1px solid #c9c9c9 !important;
  color: #444 !important;
}

#viewPistasGrupos .btn-xs.active {
  background: linear-gradient(180deg, #e6e6e6 0%, #cfcfcf 60%, #b5b5b5 100%) !important;
  border-color: #9e9e9e !important;
  color: #222 !important;
  box-shadow: 0 3px 6px rgba(0, 0, 0, .15) !important;
}

/* TAB PISTAS GRUPOS – estilo PLATA */
#navPistasGrupos.active {
  background: linear-gradient(180deg, #e6e6e6 0%, #cfcfcf 60%, #b5b5b5 100%) !important;
  border: 1px solid #9e9e9e !important;
  color: #222 !important;
}

#navPistasGrupos {
  border: 1px solid #c9c9c9 !important;
  color: #444 !important;
}

/* =====================================================
   PISTAS GRUPOS – CATEGORÍAS (PLATA PROFESIONAL)
===================================================== */

#viewPistasGrupos h4,
#viewPistasGrupos .categoria-header {
  font-size: 16px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #2c2c2c;
  background: linear-gradient(180deg, #f0f0f0 0%, #d9d9d9 60%, #c2c2c2 100%);
  border-left: 6px solid #9e9e9e;
  padding: 8px 14px;
  border-radius: 8px;
  margin: 18px 0 8px 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}


/* ===============================
   PISTAS GRUPOS – HEADER CATEGORÍA PLATA
================================= */
#viewPistasGrupos .juzg-header-supercat {
  font-size: 14px;
  /* 15px; */
  font-weight: 700;
  /* 800; */
  letter-spacing: 0.6px;
  /* 1; */
  padding: 6px 12px;
  /* 10px 16px; */
  margin: 14px 0 8px 0;
  /* 18px 0 10px 0; */

  color: #2f2f2f;

  background: linear-gradient(180deg,
      #f8f8f8 0%,
      /* 0 */
      #e2e2e2 50%,
      /* 40 */
      #cfcfcf 100%
      /* 0 */
    );

  border: 1px solid #bdbdbd;
  border-left: 4px solid #9a9a9a;
  /* 6px */
  border-radius: 8px;
  /* 10px */

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 1px 3px rgba(0, 0, 0, 0.06);
  /* 0 2px 6px        rgba(0,0,0,0.08)      */
}

/* =====================================================
   PISTAS GRUPOS – “PILLS” DE GRUPO (G1, G2, G8) PLATA
   Solo afecta #viewPistasGrupos
===================================================== */

#viewPistasGrupos .grupo-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 4px 10px;
  margin: 6px 8px 6px 0;

  font-size: 12px;
  font-weight: 900;
  letter-spacing: .6px;
  text-transform: uppercase;

  color: #1f2937;
  background: linear-gradient(180deg, #f7f7f7 0%, #e3e3e3 55%, #cfcfcf 100%);
  border: 1px solid #a8a8a8;
  border-radius: 999px;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 2px 6px rgba(0, 0, 0, .10);
}

/* opcional: un “punto” metálico a la izquierda */
#viewPistasGrupos .grupo-pill::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  margin-right: 8px;
  background: radial-gradient(circle at 30% 30%, #ffffff 0%, #d0d0d0 45%, #9a9a9a 100%);
  border: 1px solid rgba(120, 120, 120, .55);
}

/* PISTAS GRUPOS – separador visual para cada bloque de grupo */
#viewPistasGrupos .grupo-pill {
  margin: 14px 0 8px 0;
  /* más aire arriba, menos a la derecha */
  padding: 6px 12px;
  font-size: 12px;
}

#viewPistasGrupos .grupo-pill::after {
  content: "";
  display: block;
  height: 1px;
  margin-top: 10px;
  width: 100%;
  background: linear-gradient(90deg, rgba(160, 160, 160, .55), rgba(200, 200, 200, .15));
}




/* =====================================================
   FINALES BIS – ESTILO ORO PROFESIONAL
===================================================== */

#viewFinalesBIS .bis-header-supercat {
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;

  padding: 10px 18px;
  margin: 22px 0 14px 0;

  color: #4a3500;

  background: linear-gradient(180deg,
      #fff6d5 0%,
      #f5d37a 35%,
      #e0b84d 65%,
      #c89f2e 100%);

  border: 1px solid #b9931f;
  border-left: 6px solid #a87d0a;
  border-radius: 12px;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 4px 10px rgba(0, 0, 0, 0.12);
}


/* ================================
   MÓDULO: FINALES BIS - ORO (AISLADO)
   Solo afecta #viewBis
================================ */

#viewBis .bis-title {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.8px;
  padding: 8px 14px;
  margin: 16px 0 10px 0;

  color: #2a1a00;

  background: linear-gradient(180deg,
      #fff7d1 0%,
      #f7d56a 35%,
      #d6a21c 70%,
      #b07d00 100%);

  border: 1px solid #caa24a;
  border-left: 6px solid #8a5b00;
  border-radius: 10px;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 2px 6px rgba(0, 0, 0, 0.10);

  text-transform: uppercase;
}


/* ===============================
   BIS: destacar el grupo [Gx] - ORO
   =============================== */
#viewBis .bis-card .bis-row .muted {
  display: inline-flex;
  align-items: center;

  padding: 4px 12px;
  border-radius: 999px;

  font-weight: 800;
  font-size: 12px;
  letter-spacing: .8px;

  color: #4a3200;

  background: linear-gradient(180deg,
      #fff4c2 0%,
      #f4d77a 40%,
      #d4a017 100%);

  border: 1px solid #b8860b;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .7),
    0 2px 4px rgba(0, 0, 0, .08);

  opacity: 1;
  /* anulamos el muted */
}

/* ===============================
   BIS – [Gx] al lado del ejemplar + botones a la derecha
   =============================== */

#viewBis .bis-card .bis-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* info izq / botones der */
  gap: 12px;
}

#viewBis .bis-card .bis-row>div:first-child {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  /* si el nombre es largo, baja prolijo */
  gap: 10px;
  min-width: 0;
}

/* mata el salto de línea que te separa [G1] del # */
#viewBis .bis-card .bis-row>div:first-child br {
  display: none;
}

/* espacio fino entre [G1] y # */
#viewBis .bis-card .bis-row>div:first-child strong {
  margin-left: 2px;
}

/* botones siempre compactos y sin romperse */
#viewBis .bis-card .bis-row .puesto-btns {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
}


/* =====================================================
   BIS – BOTONES DE PUESTOS (ORO)
   SOLO afecta a viewBis
===================================================== */

#viewBis .btn-xs {
  background: linear-gradient(180deg, #f5f5f5 0%, #e2e2e2 100%);
  border: 1px solid #c9c9c9;
  color: #333;
  transition: all 0.2s ease;
}

#viewBis .btn-xs.active {
  background: linear-gradient(180deg,
      #ffe8a3 0%,
      #f5c94c 45%,
      #d4a017 100%);
  border: 1px solid #b8860b;
  color: #3b2b00;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 2px 6px rgba(0, 0, 0, 0.15);
}

/* =========================================
   NAV – FINALES BIS DORADO
   ========================================= */

#navBis,
#navBis.active {
  background: linear-gradient(180deg,
      #ffe9a6 0%,
      #f5c84c 45%,
      #d6a319 100%) !important;
  border: 1px solid #b88700 !important;
  color: #3a2b00 !important;
  font-weight: 700;
}

/* hover */
#navBis:hover {
  filter: brightness(1.05);
}



/* =========================================
   NAV – Botón FINALES BIS (3 estados)
   ========================================= */

/* 1) No seleccionado (idle): dorado CLARO */
#navBis.tab.tab-bis {
  background: linear-gradient(180deg, #fff4cc 0%, #f7d97a 55%, #e5b93a 100%) !important;
  border: 1px solid #c79a1f !important;
  color: #3a2b00 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75);
  opacity: .78;
}

/* 2) Hover: un poco más intenso */
#navBis.tab.tab-bis:hover {
  opacity: .92;
  filter: saturate(1.05) brightness(1.02);
}

/* 3) Seleccionado (active): dorado FUERTE */
#navBis.tab.tab-bis.active {
  background: linear-gradient(180deg, #ffe9a6 0%, #f5c84c 45%, #d6a319 100%) !important;
  border: 1px solid #b88700 !important;
  color: #2b1f00 !important;
  opacity: 1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .6),
    0 2px 8px rgba(0, 0, 0, .18);
}



/* =========================================
   NAV – Botón Pistas Grupos (PLATA)
   ========================================= */

/* 1) No seleccionado (idle): plata CLARO */
#navPistasGrupos.tab {
  background: linear-gradient(180deg,
      #f2f2f2 0%,
      #dddddd 50%,
      #c9c9c9 100%) !important;
  border: 1px solid #b5b5b5 !important;
  color: #2f2f2f !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85);
  opacity: .85;
}

/* 2) Hover */
#navPistasGrupos.tab:hover {
  opacity: .95;
  filter: brightness(1.02);
}

/* 3) Seleccionado (active): plata FUERTE */
#navPistasGrupos.tab.active {
  background: linear-gradient(180deg,
      #e5e5e5 0%,
      #cfcfcf 45%,
      #b8b8b8 100%) !important;
  border: 1px solid #9f9f9f !important;
  color: #1f1f1f !important;
  opacity: 1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .7),
    0 2px 6px rgba(0, 0, 0, .12);
}


/* =========================================
   NAV – Botón Pistas Razas (COBRE)
   ========================================= */

/* 1) No seleccionado (idle): cobre CLARO */
#navPistas.tab {
  background: linear-gradient(180deg,
      #f3d2bf 0%,
      #e0a889 50%,
      #c9875e 100%) !important;
  border: 1px solid #b87333 !important;
  color: #3b1f0f !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
  opacity: .85;
}

/* 2) Hover */
#navPistas.tab:hover {
  opacity: .95;
  filter: brightness(1.05);
}

/* 3) Seleccionado (active): cobre FUERTE */
#navPistas.tab.active {
  background: linear-gradient(180deg,
      #d08a5c 0%,
      #b87333 45%,
      #8f4e1d 100%) !important;
  border: 1px solid #7a3e14 !important;
  color: #ffffff !important;
  opacity: 1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .4),
    0 2px 6px rgba(0, 0, 0, .15);
}




/* Ajustes de estilo para pantalla de login 19/2/2026 */
#loginOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-box {
  width: 320px;
  padding: 30px !important;
  text-align: center;
  border: 2px solid #b87333 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

.login-logo {
  width: 80px;
  border-radius: 50%;
  margin-bottom: 15px;
  border: 2px solid #b87333;
}

.login-header h2 {
  color: #8a4b1c;
  font-size: 18px;
  margin-bottom: 5px;
}

.login-header p {
  font-size: 12px;
  color: #666;
  margin-bottom: 20px;
}

#inputApiKey {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  text-align: center;
  font-size: 16px;
  letter-spacing: 2px;
  margin-bottom: 15px;
}












/* Ajustes para Celulares */
@media (max-width: 600px) {

  /* 1. Forzar una sola columna en los formularios */
  .grid-container,
  .form-row,
  .pistas-container,
  .main-layout,
  .container {
    display: flex;
    flex-direction: column !important;
    gap: 15px;
  }

  /* 2. Control del orden: Pistas arriba, Juzgamiento abajo */
  .pistas-seccion,
  .pistas-listado {
    order: 1;
    /* Primero */
  }

  .juzgamiento-seccion,
  .sidebar-derecho,
  .live-results {
    order: 2;
    /* Segundo (Abajo) */
    width: 100% !important;
    margin-top: 20px;
  }


  /* 3. Inputs al 100% de ancho */
  input,
  select,
  button {
    width: 100%;
    font-size: 16px;
    /* Evita que iOS haga zoom automático al escribir */
    padding: 12px;
    /* Botones más grandes para el dedo */
    box-sizing: border-box;
    /* Asegura que el padding no rompa el ancho */
  }

  /* 3. Tablas con scroll horizontal para que no se rompan */
  .table-container {
    vertical-align: middle;
    overflow-x: auto;
    display: block;
    width: 100%;
  }

  /* 4. Ocultar columnas no críticas si es necesario */
  .col-opcional {
    display: none;
  }
}


/* --- REFORMA AUSENTE --- */
#viewPistas .dog-card-compact.is-ausente {
  opacity: 0.5;
  filter: grayscale(0.5);
  background-color: #f8f9fa !important;
  border-left-color: #7f8c8d !important;
  border-color: #d1d1d1 !important;
}

#viewPistas .btn-aus {
  background: #fff !important;
  border: 1px solid #e74c3c !important;
  color: #e74c3c !important;
  margin-right: 5px;
}

#viewPistas .btn-aus.active {
  background: #e74c3c !important;
  color: #fff !important;
  border-color: #c0392b !important;
  box-shadow: 0 4px 8px rgba(231, 76, 60, 0.4) !important;
}

#viewPistas .puesto-btns {
  display: flex;
  align-items: center;
}

.puesto-separator {
  width: 1px;
  height: 20px;
  background: #ddd;
  margin: 0 10px;
}

.ausente-badge {
  background: #e74c3c;
  color: white;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 800;
  margin-left: 10px;
  letter-spacing: 0.5px;
}

#viewPistas .is-ausente .btn-xs:not(.btn-aus) {
  pointer-events: none;
  background: #eee !important;
  color: #bbb !important;
  border-color: #ddd !important;
}



/* Estilo para la toolbar extra de catálogos */
.catalog-toolbar-extra {
  margin-bottom: 20px;
  padding: 10px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  animation: fadeInDown 0.3s ease-out;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#filterCatalogEvento {
  border: 2px solid #b87333;
  border-radius: 8px;
  padding: 10px;
  background: white;
  cursor: pointer;
  font-weight: 600;
}

#filterCatalogEvento:focus {
  outline: none;
  box-shadow: 0 0 8px rgba(184, 115, 51, 0.3);
}




/* AUS en Pistas Grupos - estilo similar a Razas */
#viewPistasGrupos .dog-card-compact.is-ausente {
  opacity: 0.50;
  filter: grayscale(0.5);
  background-color: #f8f9fa !important;
  border-left-color: #7f8c8d !important;
  border-color: #d1d1d1 !important;
}

#viewPistasGrupos .btn-aus-grupo {
  background: #fff !important;
  border: 1px solid #e74c3c !important;
  color: #e74c3c !important;
  font-weight: 800 !important;
}

#viewPistasGrupos .btn-aus-grupo.active {
  background: #e74c3c !important;
  color: #fff !important;
  border-color: #c0392b !important;
  box-shadow: 0 4px 8px rgba(231, 76, 60, 0.35) !important;
}

#viewPistasGrupos .ausente-badge-grupo {
  display: none !important;
}

#viewPistasGrupos .is-ausente .puesto-btns .btn-xs {
  pointer-events: none;
  background: #eee !important;
  color: #bbb !important;
  border-color: #ddd !important;
}

#viewPistasGrupos .is-ausente .btn-aus-grupo {
  pointer-events: auto !important;
}



#viewBis .bis-card.is-ausente {
  opacity: 0.50;
  filter: grayscale(0.5);
  background-color: #f8f9fa !important;
  border-left-color: #7f8c8d !important;
  border-color: #d1d1d1 !important;
}

#viewBis .bis-aus-zone {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 70px;
}

#viewBis .btn-aus-bis {
  background: #fff !important;
  border: 1px solid #e74c3c !important;
  color: #e74c3c !important;
  font-weight: 800 !important;
}

#viewBis .btn-aus-bis.active {
  background: #e74c3c !important;
  color: #fff !important;
  border-color: #c0392b !important;
  box-shadow: 0 4px 8px rgba(231, 76, 60, 0.35) !important;
}

#viewBis .bis-card.is-ausente .puesto-btns .btn-xs {
  pointer-events: none;
  background: #eee !important;
  color: #bbb !important;
  border-color: #ddd !important;
}

#viewBis .bis-card.is-ausente .btn-aus-bis {
  pointer-events: auto !important;
}

#viewBis .bis-card .bis-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  align-items: center !important;
  gap: 12px !important;
}

.juez-card {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}

.juez-main {
  flex: 1;
}

.juez-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 1.1em;
}

.juez-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.95em;
  color: #444;
}

.juez-info-row {
  display: flex;
  gap: 5px;
  align-items: center;
}

.juez-label {
  font-weight: 600;
  color: #666;
}

.juez-observaciones {
  margin-top: 6px;
  font-size: 0.9rem;
  color: #6f171d;
  font-weight: 600;
}

.juez-photo {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid #ddd;
}

.juez-photo-placeholder {
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  background: #f0f4f8;
  border-radius: 12px;
  border: 1px solid #ddd;
  color: #aab;
}

@media (max-width: 600px) {
  .juez-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .juez-photo,
  .juez-photo-placeholder {
    width: 80px;
    height: 80px;
    align-self: flex-start;
    margin-top: 10px;
  }
}


#viewPistas .puesto-btns,
#viewPistas .raza-puestos,
#viewPistas .dog-card .btn-group-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}




#viewPistasGrupos .puesto-btns,
#viewPistasGrupos .btn-group-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}


#viewBis .puesto-btns,
#viewBis .btn-group-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

#viewBis .bis-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
}

#viewBis .bis-card .bis-row {
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  grid-template-areas:
    "info info"
    "aus puestos" !important;
  gap: 8px 12px !important;
  align-items: center !important;
}

#viewBis .bis-card .bis-row>div:first-child {
  grid-area: info !important;
  font-size: 1rem !important;
  line-height: 1.25 !important;
  white-space: normal !important;
}

#viewBis .bis-aus-zone {
  grid-area: aus !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

#viewBis .bis-card .puesto-btns,
#viewBis .bis-card .btn-group-inline {
  grid-area: puestos !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

#viewBis .bis-card .btn-xs {
  min-width: 34px !important;
}

@media (min-width: 900px) {
  #viewBis .bis-card .bis-row {
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    grid-template-areas: "info aus puestos" !important;
  }

  #viewBis .bis-card .bis-row>div:first-child {
    grid-area: info !important;
  }

  #viewBis .bis-aus-zone {
    grid-area: aus !important;
  }

  #viewBis .bis-card .puesto-btns,
  #viewBis .bis-card .btn-group-inline {
    grid-area: puestos !important;
    justify-content: flex-end !important;
  }
}