/* Calendario de ejemplo (class/CalendarioEjemplo.cs): portada y landings por tipo.
   Tarjeta blanca de Reservar dibujada en grande + tarjeta del móvil con la reserva confirmada. */
.ce { --ce-naranja: #F26A1B; --ce-naranja-t: #C2410C; --ce-suave: #FFF1E8; --ce-tinta: #1E293B; --ce-gris: #5B6678; --ce-linea: #E3E7EE;
      --ce-libre: #E9F7EF; --ce-libre-t: #17663A; --ce-ocup: #EEF1F5; --ce-ocup-t: #6B7280; --ce-abierto: #E8F0FE; --ce-abierto-t: #1D4ED8;
      position: relative; min-width: 0; font-size: 13px; }
.ce p { margin: 0; }
.ce-ej { font-size: 12px; color: var(--ce-gris); margin-bottom: 6px !important; }
.ce-ej b { color: var(--ce-tinta); font-weight: 600; }
.ce--oscuro .ce-ej { color: #9FB0C8; }
.ce--oscuro .ce-ej b { color: #fff; }
.ce-cal { background: #fff; color: var(--ce-tinta); border-radius: 14px; padding: 16px; border: 1px solid var(--ce-linea); box-shadow: 0 18px 44px rgba(15,23,42,.14); text-align: left; }
.ce--oscuro .ce-cal { border-color: transparent; box-shadow: 0 20px 50px rgba(0,0,0,.35); }
.ce-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.ce-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.ce-tabs span { font-size: 12.5px; font-weight: 500; padding: 5px 11px; border-radius: 999px; background: #F6F7FA; color: var(--ce-gris); }
.ce-tabs span.on { background: var(--ce-suave); color: var(--ce-naranja-t); font-weight: 600; box-shadow: inset 0 0 0 1px #F8C7A8; }
.ce-sem { font-size: 12.5px; color: var(--ce-gris); font-weight: 500; }
.ce-rej { display: grid; gap: 5px; margin-top: 12px; font-size: 12.5px; }
.ce-d { text-align: center; font-weight: 600; font-size: 12px; color: var(--ce-gris); padding-bottom: 2px; }
.ce-d b { display: block; color: var(--ce-tinta); font-size: 15px; }
.ce-h { color: var(--ce-gris); font-size: 12px; display: flex; align-items: center; font-variant-numeric: tabular-nums; line-height: 1.2; }
.ce-c { border-radius: 7px; padding: 7px 4px; text-align: center; font-weight: 500; line-height: 1.25; min-width: 0; overflow-wrap: anywhere; }
.ce-c small { display: block; font-size: 10.5px; font-weight: 500; opacity: .85; }
.ce-l { background: var(--ce-libre); color: var(--ce-libre-t); }
.ce-o { background: var(--ce-ocup); color: var(--ce-ocup-t); }
.ce-t { background: var(--ce-naranja); color: #fff; font-weight: 600; }
.ce-p { background: var(--ce-abierto); color: var(--ce-abierto-t); }
.ce-norma { margin-top: 10px !important; font-size: 12px; color: var(--ce-gris); }
.ce-norma::before { content: "✓ "; color: var(--ce-libre-t); font-weight: 700; }
.ce-movil { position: relative; margin: -12px -6px 0 auto; width: 250px; max-width: 100%; background: #fff; color: var(--ce-tinta); border-radius: 18px; padding: 14px; box-shadow: 0 18px 40px rgba(15,23,42,.3); border: 6px solid #0B1422; text-align: left; }
.ce-ok { display: flex; gap: 8px; align-items: center; font-weight: 600; font-size: 13px; color: var(--ce-libre-t); }
.ce-ok i { width: 22px; height: 22px; border-radius: 50%; background: var(--ce-libre); display: grid; place-items: center; font-style: normal; font-size: 13px; flex-shrink: 0; }
.ce-que { font-size: 15px; font-weight: 700; margin-top: 8px !important; }
.ce-cuando { font-size: 12.5px; color: var(--ce-gris); }
.ce-rec { font-size: 11.5px; margin-top: 10px !important; padding-top: 8px; border-top: 1px solid var(--ce-linea); color: var(--ce-gris); }
/* Portada: ejemplos que se turnan */
.ce-rota { transition: opacity .35s ease; min-height: 470px; }
.ce-rota.ce-out { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .ce-rota { transition: none; } }
/* También en el móvil */
.ce-tiendas { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 16px; font-size: 13px; color: #64748B; }
.ce-tiendas.ce--oscuro { color: #9FB0C8; }
.ce-store { display: inline-flex; gap: 6px; align-items: center; background: #0B1422; color: #fff !important; border: 1px solid #3A4B66; border-radius: 9px; padding: 6px 12px; font-weight: 600; font-size: 13px; text-decoration: none !important; }
.ce-store:hover { background: #1B2B44; }
/* Portada: con aire antes de las cifras y botones algo más grandes */
.ap-hero .ce-tiendas { margin: 22px 0 34px; gap: 10px; }
.ap-hero .ce-store { padding: 9px 16px; font-size: 14px; border-radius: 10px; }
/* Móvil: el texto en su línea y las dos tiendas juntas, del mismo ancho; en la portada (texto centrado), centradas */
@media (max-width: 991px) {
  .ce-tiendas > span { flex-basis: 100%; }
  .ce-store { min-width: 150px; justify-content: center; }
  .ap-hero .ce-tiendas { justify-content: center; margin: 18px 0 26px; }
}
@media (max-width: 991px) {
  .ce-rota { min-height: 0; }
  .ce-movil { margin: 12px 0 0; width: auto; border-width: 4px; }
}
@media (max-width: 575px) {
  .ce-cal { padding: 12px; }
  .ce-rej { gap: 3px; font-size: 11px; }
  .ce-c { padding: 6px 1px; }
  .ce-h { font-size: 11px; }
}