/*
 * EL RELOJ Y EL CALENDARIO DE LA TIENDA (30-09-2026) · includes/tienda_reloj.php
 * Los colores son los del tema de la tienda (--navy, --tinta, --suave,
 * --linea, --card-bg): en Navidad el calendario es de Navidad.
 */

/* ---------------------- EN LA BARRA DE ARRIBA ---------------------- */
.tn-hoy { position: relative; }
.tn-hoy > summary {
  list-style: none; display: inline-flex; align-items: center; gap: .45rem;
  min-height: 2.5rem; padding: .3rem .6rem; border-radius: 10px; cursor: pointer;
  color: #fff; font-size: .9rem; font-weight: 600; white-space: nowrap;
}
.tn-hoy > summary::-webkit-details-marker { display: none; }
.tn-hoy > summary::marker { content: ''; }
.tn-hoy > summary:hover { background: rgba(255, 255, 255, .14); }
.tn-hoy[open] > summary { background: rgba(255, 255, 255, .18); }
.tn-hoy > summary:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.tn-hoy-hora { font-variant-numeric: tabular-nums; }
/* Texto para quien usa lector de pantalla: no se ve, pero se lee. */
.tn-oculto {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
/* EN UN TELÉFONO ESTRECHO EL RELOJ NO SE PUEDE COMER EL NOMBRE DE LA TIENDA
   (revisión del 30-09-2026: a 320 px, con algo en la cesta, el nombre medía
   0 px, y con una cesta de más de 1.000 € la página se salía por la derecha).
   Por debajo de 400 px, la hora sin el icono; por debajo de 360, el icono sin
   la hora, que a un toque está entera en el panel. */
@media (max-width: 399px) {
  .tn-hoy > summary { padding: .3rem .35rem; gap: .3rem; }
  .tn-hoy > summary > .bi { display: none; }
}
@media (max-width: 359px) {
  .tn-hoy > summary > .bi { display: inline-block; }
  .tn-hoy-hora { display: none; }
}
/* La fecha, según el sitio: entera en el ordenador, corta en la tableta, y
   en el móvil solo la hora; la fecha entera está a un toque, en el panel. */
.tn-hoy-larga, .tn-hoy-corta { display: none; font-weight: 500; opacity: .92; }
.tn-hoy-larga::after, .tn-hoy-corta::after { content: '·'; margin-left: .45rem; opacity: .7; }
@media (min-width: 576px) and (max-width: 1099px) { .tn-hoy-corta { display: inline; } }
@media (min-width: 1100px) { .tn-hoy-larga { display: inline; } }

.tn-hoy-panel {
  position: absolute; right: 0; top: calc(100% + .45rem); z-index: 47;
  width: 20rem; max-width: calc(100vw - 1.5rem);
  background: var(--card-bg, #fff); color: var(--tinta, #14171A);
  border: 1px solid var(--linea, #E4E8EE); border-radius: 12px; padding: .85rem;
  box-shadow: 0 10px 28px rgba(11, 23, 40, .22);
  white-space: normal; font-weight: 400;
}
@media (max-width: 575px) {
  /* Como «Entrar»: a lo ancho de la barra, que un panel colgado de la
     esquina se sale por un lado en un teléfono estrecho. */
  .tn-hoy { position: static; }
  .tn-hoy-panel { left: .75rem; right: .75rem; width: auto; max-width: none; }
}

/* ------------------------- EL CALENDARIO ------------------------- */
.tn-cal { color: var(--tinta, #14171A); }
.tn-cal-hoy { margin-bottom: .6rem; }
.tn-cal-reloj {
  display: block; font-size: 1.9rem; font-weight: 700; line-height: 1.1;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em; color: var(--navy, #0B3D6E);
}
.tn-cal-fecha { font-size: .98rem; font-weight: 600; margin-top: .15rem; }
.tn-cal-fecha::first-letter { text-transform: uppercase; }
.tn-cal-zona { font-size: .78rem; color: var(--suave, #6B7686); margin-top: .1rem; }

.tn-cal-mes { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin: .2rem 0 .3rem; }
.tn-cal-mes strong { font-size: .95rem; }
.tn-cal-mes button {
  width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 1px solid var(--linea, #E4E8EE);
  background: transparent; color: var(--navy, #0B3D6E); cursor: pointer; display: grid; place-items: center;
}
.tn-cal-mes button:hover:not(:disabled) { background: color-mix(in srgb, var(--navy, #0B3D6E) 9%, transparent); }
.tn-cal-mes button:focus-visible { outline: 2px solid var(--navy, #0B3D6E); outline-offset: 2px; }
.tn-cal-mes button:disabled { opacity: .35; cursor: default; }

.tn-cal-rejilla { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 2px; margin: 0; }
.tn-cal-rejilla th {
  font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: var(--suave, #6B7686); text-align: center; padding: .15rem 0;
}
.tn-cal-rejilla td { padding: 0; text-align: center; }
.tn-cal-rejilla td > span {
  position: relative; display: grid; place-items: center; width: 2rem; height: 2rem; max-width: 100%;
  margin: 0 auto; border-radius: 50%;
  font-size: .85rem; font-variant-numeric: tabular-nums;
}
/* Hoy, relleno del color de la tienda. */
.tn-cal-rejilla td > span.hoy { background: var(--navy, #0B3D6E); color: #fff; font-weight: 700; }
/* Un día de fiesta: un punto de su color debajo del número. */
.tn-cal-rejilla td > span.fiesta { font-weight: 700; }
.tn-cal-rejilla td > span.fiesta::after {
  content: ''; position: absolute; left: 50%; bottom: .12rem; width: .38rem; height: .38rem;
  margin-left: -.19rem; border-radius: 50%; background: var(--c, #0B3D6E);
}
.tn-cal-rejilla td > span.hoy.fiesta::after { background: #fff; }

.tn-cal-sub { margin: .7rem 0 .3rem; font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--suave, #6B7686); }
.tn-cal-fiestas { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; font-size: .84rem; }
.tn-cal-fiestas li { display: flex; align-items: baseline; gap: .5rem; line-height: 1.35; }
.tn-cal-fiestas li i { flex: none; width: .6rem; height: .6rem; border-radius: 50%; background: var(--c, #0B3D6E);
  transform: translateY(.05rem); }
.tn-cal-fiestas small { color: var(--suave, #6B7686); font-size: .8rem; }
.tn-cal-fiestas .tn-cal-nada { color: var(--suave, #6B7686); }
.tn-cal-sub[hidden] { display: none; }

@media print { .tn-hoy { display: none; } }