/* r17 (dueño 08/11): reloj en vivo de la barra de arriba (módulo 129). Hora de Costa Rica y, si es otra, la de quien mira con su bandera.
   Escritorio: una línea antes de la campana. Tableta y pantallas medianas: dos renglones (más angosto). Celular: fila del carrusel, a la izquierda, dos renglones cortos sin a. m./p. m. */
.mc-reloj { display: inline-flex; align-items: center; flex: 0 0 auto; min-height: 44px; padding: 0 12px; box-sizing: border-box; border-radius: 12px;
  border: 1px solid var(--linea, #2f2b70); background: var(--sup-2, #1d1a4f); color: var(--texto, #f4f3ff);
  font: 700 13px/1.15 var(--f-datos, system-ui, sans-serif); font-variant-numeric: tabular-nums; white-space: nowrap; cursor: default; user-select: none; }
.mc-reloj .tc-bandera { font-family: 'Ticopa Flags', sans-serif; font-size: 1.05em; }
.mc-reloj-sep { color: var(--suave, #b9b6dd); margin: 0 1px; }
.mc-reloj-ab { color: var(--suave, #b9b6dd); font-weight: 700; }
.mc-reloj-corto { display: none; }
/* pantallas medianas: la hora de quien mira baja a un segundo renglón para no quitarle espacio a la búsqueda */
@media (min-width: 561px) and (max-width: 1279px) {
  .mc-reloj:not(.mc-reloj-igual) .mc-reloj-largo { display: inline-grid; grid-template-columns: auto; row-gap: 1px; font-size: 12px; }
  .mc-reloj:not(.mc-reloj-igual) .mc-reloj-largo .mc-reloj-sep { display: none; }
  .mc-reloj { padding: 0 10px; }
}
/* 1024-1279: la fila no se parte (el buscador cede el espacio del reloj; sin esto «Ticopa World» bajaba a otra fila) */
@media (min-width: 1024px) and (max-width: 1279px) { body.marcador .nav-actions.search-container:has(> #mc-reloj) { flex-wrap: nowrap !important; } body.marcador .nav-actions > #input-buscador { min-width: 120px !important; } }
@media (min-width: 561px) and (max-width: 1023px) { body.marcador #mc-reloj { order: 0; } }
/* celular: no cabe en la fila de arriba (logo · idioma · mundo · lupa · campana · cuenta · menú), así que va a la izquierda del carrusel de partidos */
@media (max-width: 560px) {
  html body.marcador .nav-container:has(> .nav-actions > #mc-reloj) .nav-ticker-wrapper { grid-area: ticker !important; min-width: 0 !important; }   /* 10-responsive-final.css lo estiraba con grid-column: 1 / -1 */
  html body.marcador .nav-container:has(> .nav-actions > #mc-reloj) { grid-template-areas: "logo idioma . world lupa campana cuenta menu" "review review review review review review review review" "accountmode accountmode accountmode accountmode accountmode accountmode accountmode accountmode" "buscar buscar buscar buscar buscar buscar buscar buscar" "reloj reloj reloj ticker ticker ticker ticker ticker" !important; }
  html body.marcador .nav-actions > #mc-reloj { grid-area: reloj; align-self: center; justify-self: start; min-height: 0; padding: 3px 7px; margin: 2px 6px 2px 0; border-radius: 8px; font-size: 11.5px; line-height: 1.2; }
  /* lo normal: la cinta de partidos (#ticker-fino) se ve; el reloj flota a su izquierda con la misma altura y la cinta usa el resto (overflow:hidden la deja al lado) */
  html body.marcador .navbar > #mc-reloj { float: left; height: 32px; min-height: 0; padding: 0 8px 0 10px; margin: 0; border: 0; border-top: 1px solid rgba(255,255,255,.08); border-right: 1px solid var(--linea, #2f2b70); border-radius: 0; background: rgba(5,8,16,.9); font-size: 11px; line-height: 1.15; }
  .mc-reloj-largo { display: none; }
  .mc-reloj-corto { display: inline-grid; grid-template-columns: auto; row-gap: 1px; }
  .mc-reloj-corto .mc-reloj-sep { display: none; }
  .mc-reloj-corto .tc-bandera { font-size: 1.3em; }                        /* r17: banderas más grandes en celular (se veían muy chicas) */
  .mc-reloj-corto .mc-reloj-ab { font-size: 9.5px; font-weight: 600; margin-left: 2px; }   /* la abreviatura (ET, CT, CDMX…) va más chica para que quepa en 360 px */
}