/* =========================================================================
   HIPÓDROMO CHILE — Programa de Carreras
   Tipografía: Oswald (títulos condensados) + Roboto Condensed (datos/tabla)
   Paleta base: negro / blanco / rojo pista (#c81e2c), con colores dinámicos
   de casaquilla inyectados vía variables CSS por caballo.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Roboto+Condensed:ital,wght@0,400;0,500;0,700;1,400&display=swap');

:root{
  --ink:        #111111;
  --ink-soft:   #3a3a3a;
  --paper:      #ffffff;
  --paper-dim:  #f5f5f4;
  --rule:       #111111;
  --rule-soft:  #cfcfcf;
  --track-red:  #c81e2c;
  --gold:       #d8a41f;
  --gold-dim:   #c9c9c9;

  --font-display: 'Oswald', 'Arial Narrow', sans-serif;
  --font-body:    'Roboto Condensed', 'Arial Narrow', sans-serif;
}

*, *::before, *::after{ box-sizing: border-box; }

html, body{
  margin: 0;
  padding: 0;
  background: var(--paper-dim);
  font-family: var(--font-body);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* -------------------------------------------------------------------------
   Scroll behaviour: the flyer keeps its original fixed layout at all times.
   On phones the visible viewport is ~400px; anything wider scrolls sideways
   instead of reflowing, so the racing form always reads exactly like the
   printed sheet.
   ------------------------------------------------------------------------- */
.scroll-wrapper{
  width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  background: var(--paper-dim);
  padding: 10px 0 28px;
}

.sheet{
  width: 1000px;
  min-width: 200px;
  margin: 0 auto;
  background: var(--paper);
  border: 1px solid var(--rule);
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

/* =========================================================================
   TICKER — franja de texto rotativo, siempre en una sola línea
   ========================================================================= */
 .ticker-bar {
    width: 100%;
    overflow: hidden;
    background: #0b0e14; /* Fondo oscuro elegante */
    border-top: 2px solid #f0b31c; /* Toque dorado/amarillo */
    border-bottom: 2px solid #f0b31c;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    padding: 12px 0;
    position: relative;
    z-index: 10;
  }

  .ticker-track {
    display: flex;
    gap: 50px; /* Espacio entre textos */
    white-space: nowrap;
    animation: scrollTicker 25s linear infinite;
    width: max-content;
  }

  /* Hacemos que el loop sea infinito y suave */
  @keyframes scrollTicker {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }

  /* Estilos de cada ítem */
  .ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Segoe UI', Roboto, Arial, sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    letter-spacing: 0.5px;
    padding: 0 10px;
    transition: transform 0.2s ease;
  }

  /* Estilos de los enlaces */
  .ticker-item a {
    color: #ffffff;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    border-radius: 20px;
    transition: all 0.25s ease;
  }

  /* Efecto hover (al pasar el mouse) */
  .ticker-item a:hover {
    background: rgba(240, 179, 28, 0.2);
    color: #f0b31c;
    transform: scale(1.05);
    text-decoration: none;
  }

  /* Enlace especial para Instagram con color distintivo */
  .ticker-item a.ig-link:hover {
    background: rgba(225, 48, 108, 0.25);
    color: #e1306c;
  }
  @media (max-width: 768px) {
    .ticker-track {
      gap: 30px;
      animation-duration: 18s;
    }
    .ticker-item {
      font-size: 0.9rem;
    }
  }
/* =========================================================================
   HEADER
   ========================================================================= */
.race-header{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 14px 20px 6px;
  border-bottom: 4px solid var(--rule);
}

.race-header-left{
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.race-number{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 100px;
  line-height: 0.9;
  color: var(--ink);
}
.race-number sup{
  font-size: 50px;
  top: -1.8em;
}


.race-header-text h1{
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 26px;
  letter-spacing: 0.2px;
}
.race-header-text h1 .sep{
  color: var(--ink-soft);
  font-weight: 400;
  margin: 0 6px;
}

.race-time{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--track-red);
  margin-top: 2px;
}

.race-header-right{
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 130px;
}

.retro-badge{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 110px;
  height: 66px;
}
.retro-flag{
  position:absolute;
  inset:0;
  background:var(--badge-color,#ffffff);
}
.retro-flag svg{ width: 100%; height: 100%; }

.retro-number{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 30px;
  color: var(--ink);
  z-index: 1;
  padding: 0 4px;
}

.retro-label{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.5px;
  color: var(--ink);
}
.retro-code{
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  color: var(--ink-soft);
}

/* =========================================================================
   CONDICIONES DE LA CARRERA
   ========================================================================= */
.race-conditions{
  padding: 6px 20px 4px;
  border-bottom: 1px solid var(--rule-soft);
}
.race-conditions p{
  margin: 1px 0;
  font-size: 13px;
  line-height: 1.35;
  color: var(--ink);
}
.race-conditions strong{
  font-weight: 700;
}

.mandil-label{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 4px 20px 2px;
  color: var(--ink);
}

/* =========================================================================
   LISTA DE CABALLOS
   ========================================================================= */
.horses{
  display: flex;
  flex-direction: column;
}

.horse-row{
  display: flex;
  border-top: 3px solid var(--rule);
}
.horse-row:first-child{
  border-top: 3px solid var(--rule);
}

/* ---------- Sidebar (número / casaquilla / stats) ---------- */
.sidebar{
  width: 150px;
  flex: 0 0 150px;
  padding: 8px 8px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  border-right: 2px solid var(--rule);
  background: var(--paper);
}

.post-number{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 70px;
  line-height: 0.85;
  color: var(--ink);
}

.silk-icon{
  width: 46px;
  height: 46px;
  border-radius: 6px;
  background: var(--paper-dim);
  border: 1px dashed var(--rule-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2px;
}


.silk-icon img.silk-image {
  width: 55px;      /* ajusta según el ancho de tu sidebar */
  height: 55px;

}
.post-silk-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}

.post-silk-row .post-number,
.post-silk-row .silk-icon {
  width: auto;      /* anula el width:100% heredado */
  display: flex;    /* anula cualquier display:block heredado */
  flex: 0 0 auto;   /* que no crezcan ni se encojan de más */
}


.color-badge{
  width: 100%;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 0.4px;
  padding: 3px 2px;
  border: 2px solid var(--jersey-border, var(--ink));
  background: var(--jersey-bg, var(--paper));
  color: var(--jersey-fg, var(--ink));
  text-shadow: 0 0 1px rgba(0,0,0,0.15);
}

.stars-row{
  display: flex;
  gap: 1px;
  margin: 2px 0;
}
.star{
  font-size: 14px;
  color: var(--gold-dim);
  line-height: 1;
}
.star.filled{ color: var(--gold); }

.track-record{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  line-height: 1.15;
}
.track-record-label{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 9.5px;
  letter-spacing: 0.3px;
  color: var(--ink);
}
.track-record-value{
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  margin-top: 2px;
}

.earnings{
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  color: var(--ink-soft);
  margin-top: 2px;
}


.race-header-center {
  display: flex;
  align-items: flex-start;   /* antes: center */
  justify-content: center;
  flex: 1;
  padding: 0 20px;
}
Con esto obtienes:

Bolsa de Premios  $2.650.500
1° Lugar  $1.710.000
2° Lugar  $478.800
3° Lugar  $307.800
4° Lugar  $153.900
Si prefieres que "Bolsa de Premios" y el monto estén en líneas separadas (2 líneas en vez de 1) en lugar de juntos, dime y ajusto .premios-titulo/.premios-bolsa para que también sean display: block.





.premios {
  width: 100%;
  display: flex;
  flex-direction: column;   /* antes: row (implícito) */
  align-items: flex-start;  /* antes: center */
  gap: 4px;
}

.premios-titulo,
.premios-bolsa {
  display: inline;
}

.premios-lista {
  display: flex;
  flex-direction: column;   /* cada premio en su propia línea */
  align-items: flex-start;
  gap: 2px;
  width: 100%;
}

.premio-item {
  display: flex;
  gap: 6px;
  white-space: nowrap;
}

.premio-lugar {
  font-size: 12px;
  color: var(--ink-soft, #666);
  min-width: 60px;   /* alinea los montos en columna */
}

.premio-monto {
  font-weight: bold;
}

/* ---------- Content (nombre / genealogía / tabla) ---------- */
.content{
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 8px 14px 8px 16px;
  min-width: 0;
}

.header-line1{
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: nowrap;
}

.horse-name{
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.peso-dist{
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 26px;
  color: var(--ink);
}

.race-post{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
}
.post-no{
  border-bottom: 2px solid var(--ink);
  padding: 0 3px;
}

.jockey-name{
  margin-left: auto;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  white-space: nowrap;
}
.jockey-stats{
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 12px;
  color: var(--ink-soft);
  margin-left: 4px;
}

.header-line2{
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 1px;
}
.edad{
  font-size: 22px;
  color: var(--ink);
  margin-left: 40px;
  margin-right: 0px;
}

.header-line2 .stud{
  font-weight: 700;
  color: var(--ink);
}

.header-line3{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12.5px;
  color: var(--ink-soft);
  margin-top: 1px;
  margin-bottom: 4px;
  gap: 12px;
}
.header-line3 .silk-desc{
  font-style: italic;
}
.header-line3 .trainer-name{
  font-family: var(--font-display);
  font-weight: 600;
  font-style: normal;
  font-size: 12.5px;
  color: var(--ink);
  white-space: nowrap;
}

/* =========================================================================
   TABLA DE ACTUACIONES PASADAS
   ========================================================================= */

.perf-table tr{
  border-top: 1px solid var(--rule-soft);
}
.perf-table tr:first-child{ border-top: none; }
.perf-table tr:nth-child(odd){ background: var(--paper-dim); }

.perf-table td{
  padding: 3px 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.c-fecha{ width: 10px; }
.c-dot{ width: 16px; }
.track-dot{
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 5%;
  background: var(--track-red);
}
.c-dist{ width: 2px; font-weight: 2; }
.c-pos{ width: 2px; color: var(--ink); }
.c-margen{
  width: 0px;   /* antes 320px — ya no necesita espacio para rivales */
  white-space: normal;
}
.c-rivales{
  width: 0px;   /* antes 320px — ya no necesita espacio para rivales */
  white-space: normal;
}

.c-tiempo{ width: 2px;  }
.c-clase{ width: 2px; color: var(--ink-soft); }
.c-pesojinete{ width: 2px; }
.c-dividendo{ width: 2px; color: var(--track-red);}
.c-parciales{ width: 2px; }
.c-raceid{ width: 2px; color: var(--ink-soft); }
.c-cam{ width: 2px; text-align: right; }
.c-cam1{ width: 2px; text-align: left; }


.c-peso-ejemplar{ width: 34px; text-align: center; }
.c-distancia{ width: 60px; font-weight: 500; }
.c-codigo-pista{ width: 40px; color: var(--ink-soft); }
.c-partidor{ width: 34px; text-align: center; color: var(--ink-soft); }


.perf-table{
  table-layout: auto;   /* en vez de fixed */
}


.cam-icon{
  width: 26px;
  height: 20px;
  fill: var(--track-red);
}

/* Agregar a styles.css */

html{
  scroll-behavior: smooth;
}

body{
  padding-bottom: 64px; /* para que la barra fija no tape el final del contenido */
}

.race-nav{
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 12px;   /* ~20% más alta que la versión anterior (10px) */
  z-index: 1000;
  box-shadow: 0 -3px 10px rgba(0,0,0,0.3);
}

.race-nav-label{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.5px;
  color: #ffffff;
  text-transform: uppercase;
  flex: 0 0 auto;
  padding-top: 7px;
}

/* checkbox oculto: controla colapsado/expandido sin JS */
.race-nav-toggle-input{
  display: none;
}

.race-nav-links{
  display: flex;
  gap: 0px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;      /* Firefox: oculta la barra de scroll */
}
.race-nav-links::-webkit-scrollbar{
  display: none;              /* Chrome/Safari: oculta la barra de scroll */
}

.race-nav a{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 40px;             /* número más grande */
  color: #ffffff;
  background: var(--track-red);
  border-radius: 4px;          /* cuadrado tipo tecla, no redondo */
  width: 45px;
  height: 45px;
  min-width: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  flex: 0 0 auto;
  box-shadow: 0 2px 0 rgba(0,0,0,0.35);   /* efecto "tecla" con relieve */
  transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.1s ease;
}

.race-nav a:hover,
.race-nav a:focus{
  background: var(--gold);
  color: var(--ink);
}
.race-nav a:active{
  transform: translateY(2px);
  box-shadow: 0 0 0 rgba(0,0,0,0.35);
}

.race-nav-arrow-btn{
  flex: 0 0 auto;
  width: 40px;
  height: 45px;
  border: none;
  background: transparent;
  color: #ffffff;
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease;
}

.race-nav-arrow-btn:hover{
  color: var(--gold);
}

.race-nav a{
  background: var(--track-red);
  opacity: 0.55;              /* botones inactivos "apagados" */
  transform: scale(0.92);
}

.race-nav-link.active{
  opacity: 1;
  transform: scale(1.4);
  box-shadow: 0 0 0 2px var(--gold), 0 2px 0 rgba(0,0,0,0.35);
}
/* =========================================================================
   RESPONSIVE — mobile viewport reserves 400px; the sheet itself never
   reflows, it simply becomes horizontally scrollable inside the wrapper.
   ========================================================================= */
@media (max-width: 1300px){
  .scroll-wrapper{ padding: 6px 0 20px; }
}

@media (max-width: 480px){
  .scroll-wrapper{
    padding: 4px 0 16px;
  }
}