/* EL ASPECTO DEL SELECTOR DE PERIODO (assets/js/bx-periodo.js), solo sus trozos de recorrido.css: en lo publicado Tienda lo usa y
   Recorrido aún no ha salido. Cuando salga Recorrido, este fichero se sustituye por el suyo entero. */
.rc-dp{
  --rc-bg:#f2f2f2; --rc-card:#fff; --rc-linea:#e2e2e2; --rc-sup:#efefef; --rc-cebra:#f6f6f6;
  --rc-tx:#141414; --rc-tx2:#3d3d3d; --rc-tx3:#555;
  --rc-azul:#0071e3; --rc-enlace:#0066cc; --rc-verde:#1a7f37; --rc-verde-s:#e6f4ea; --rc-rojo:#c62828; --rc-rojo-s:#fdecec; --rc-pista:#e4e4e4; --rc-flecha:#9a9a9a;
  --rc-filo:rgba(17,17,17,.16); --rc-fondo-suave:#fafafa;
  --rc-ease:cubic-bezier(.2,.8,.2,1);
  --rc-letra:var(--f-app, -apple-system,BlinkMacSystemFont,BxLee,'Segoe UI',system-ui,sans-serif);
}
.rc-dp *, .rc-dp *::before, .rc-dp *::after{ box-sizing:border-box; }
.rc-dp :where(button){ appearance:none; border:0; background:transparent; color:inherit; font:inherit; cursor:pointer; padding:0; margin:0; }
.rc-dp :where(button:focus-visible){ outline:3px solid var(--rc-azul); outline-offset:2px; }

/* EL SELECTOR DE PERIODO, calcado del Business Intelligence del Dashboard (JB, 25-oct-2026: «no, el mismo selector de fecha del
   business inteligente del dashboard»; su original en BRIOX DASHBOARD/assets/style.css, .bi-dp-*): botón con contorno, y un
   desplegable que nace de él con los rangos rápidos a la izquierda y el calendario a la derecha. Cada día, del color de cuántas
   visitas pagan ese día (los mismos cinco tonos del BI, de verde a rojo casi negro). Medidas a nuestra escala: 44 px y 15-16 px. */
.rc-dp{ position:relative; }
.rc-dp-btn{ display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:8px 16px; border:1.5px solid var(--rc-tx); border-radius:999px;
  background:var(--rc-card); font-size:16px; font-weight:600; white-space:nowrap; transition:background-color .16s var(--rc-ease), transform .12s var(--rc-ease); }
.rc-dp-btn:active{ transform:scale(.97); }
@media (hover:hover){ .rc-dp-btn:hover{ background:var(--rc-sup); } }
.rc-dp-btn svg{ width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.rc-dp-ch{ transition:transform .16s var(--rc-ease); }
.rc-dp.abierto .rc-dp-ch{ transform:rotate(180deg); }
.rc-dp-panel{ position:absolute; right:0; top:calc(100% + 8px); z-index:40; display:grid; grid-template-columns:210px 344px; background:#fff;
  border:1.5px solid #dcdcdc; border-radius:18px; box-shadow:0 12px 40px rgba(0,0,0,.14); transform-origin:top right; animation:rc-dp-nace .16s var(--rc-ease); }
.rc-dp:not(.abierto) .rc-dp-panel{ display:none; }
@keyframes rc-dp-nace{ from{ opacity:0; transform:translateY(-4px) scale(.98); } }
/* al abrir, la página baja lo justo para verlo entero (bx-periodo.js): arriba deja libre la barra negra del panel (64 px) */
.rc-dp-panel{ scroll-margin:88px 0 16px; }
/* el velo de detrás de la hoja del móvil: en el ordenador no existe */
.rc-dp-velo{ display:none; }
.rc-dp-rap{ display:flex; flex-direction:column; gap:2px; padding:12px 8px; border-right:1.5px solid #ebebeb; }
.rc-dp-t{ padding:4px 12px 8px; font-size:14px; font-weight:700; color:var(--rc-tx3); }
.rc-dp-rap button{ min-height:40px; padding:9px 12px; border-radius:10px; text-align:left; font-size:15px; font-weight:600; white-space:nowrap; }
.rc-dp-rap button.on{ background:#141414; color:#fff; }
@media (hover:hover){ .rc-dp-rap button:not(.on):hover{ background:#f2f2f2; } }
.rc-dp-cal{ min-width:0; padding:14px 16px; }
.rc-dp-nav{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0 0 10px; }
.rc-dp-nav b{ font-size:16px; font-weight:700; }
.rc-dp-nav button{ width:40px; height:40px; border-radius:10px; background:#f2f2f2; font-size:22px; font-weight:600; line-height:1; }
.rc-dp-nav button:disabled{ background:transparent; color:#c4c4c4; cursor:default; }
.rc-dp-grid{ display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:4px; }
.rc-dp-ds{ padding:2px 0 4px; text-align:center; font-size:14px; font-weight:700; color:#6b6b6b; }
.rc-dp-grid button{ position:relative; height:38px; border-radius:6px; background:#ebedf0; font-size:15px; font-weight:600; font-variant-numeric:tabular-nums; }
.rc-dp .lv4{ background:#1f7a3d; color:#fff; } .rc-dp .lv3{ background:#74c47f; } .rc-dp .lv2{ background:#f3c64f; }
.rc-dp .lv1{ background:#e8645a; } .rc-dp .lv0{ background:#5c0b10; color:#fff; }
.rc-dp-grid button.en{ box-shadow:0 0 0 3px #c4dafc; }
.rc-dp-grid button.ext{ background:var(--rc-azul); color:#fff; box-shadow:0 0 0 3px #c4dafc; }
.rc-dp-grid button:disabled{ background:transparent; color:#c4c4c4; cursor:default; }
/* al pasar por un día (o al llegar con el teclado), su detalle: visitas y cuántos pagan */
.rc-dp-grid button[data-tip]:focus-visible::after{ content:attr(data-tip); }
@media (hover:hover){ .rc-dp-grid button[data-tip]:hover::after{ content:attr(data-tip); } }
.rc-dp-grid button[data-tip]::after{ position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%); z-index:2; width:max-content;
  max-width:260px; padding:8px 10px; border-radius:10px; background:#141414; color:#fff; font-size:14px; font-weight:500; line-height:1.35;
  text-align:left; white-space:pre-line; pointer-events:none; }
.rc-dp-grid button.iz::after{ left:0; transform:none; }
.rc-dp-grid button.de::after{ left:auto; right:0; transform:none; }
.rc-dp-ley{ display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin:12px 0 0; font-size:14px; font-weight:600; color:var(--rc-tx3); }
.rc-dp-ley i{ width:14px; height:14px; border-radius:4px; }
.rc-dp-ley span + i, .rc-dp-ley i + span{ margin-left:2px; }
.rc-dp-pie{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:12px -16px -14px; padding:12px 16px;
  border-top:1.5px solid #ebebeb; font-size:15px; font-weight:600; color:var(--rc-tx3); }
.rc-dp-ok{ min-height:44px; padding:0 22px; border-radius:12px; background:var(--rc-azul); color:#fff; font-size:16px; font-weight:700; white-space:nowrap; }
.rc-dp-ok:disabled{ background:#c4c4c4; cursor:default; }
/* sin datos todavía: los días en gris y la leyenda dice que carga (nunca un rojo «Nada» provisional) */
.rc-dp-carga{ min-height:20px; color:var(--rc-tx3); }
@keyframes rc-dp-sube{ from{ opacity:0; transform:translateY(24px); } }
@keyframes rc-dp-velo{ from{ opacity:0; } }
@media (prefers-reduced-motion: reduce){ .rc-dp .rc-dp-panel, .rc-dp .rc-dp-velo{ animation:none; } }
@container (max-width: 620px){
  .rc-dp{ position:static; }
  /* 2-nov-2026 (JB: «funciona fatal… y en el móvil también»): colgado del botón medía 690 px en una pantalla de 664 y el calendario
     quedaba debajo de la barra de abajo. Ahora es una hoja que sube desde abajo, como «Más», por encima de la barra y con velo;
     si no cabe entera, se desliza por dentro y «Aplicar» se queda siempre a la vista. */
  .rc-dp-velo{ display:block; position:fixed; inset:0; z-index:9500; background:rgba(0,0,0,.32); touch-action:none; animation:rc-dp-velo .2s ease-out; }
  .rc-dp-panel{ position:fixed; left:8px; right:8px; top:auto; bottom:calc(var(--bm-suelo, 0px) + 8px); z-index:9600; grid-template-columns:minmax(0,1fr);
    max-height:calc(100dvh - var(--bm-suelo, 0px) - 24px); overflow-y:auto; overscroll-behavior:contain; border-radius:22px;
    box-shadow:0 -8px 40px rgba(0,0,0,.18); transform-origin:bottom center; animation:rc-dp-sube .24s var(--rc-ease); }
  .rc-dp-rap{ flex-direction:row; flex-wrap:wrap; gap:6px; padding:12px; border-right:0; border-bottom:1.5px solid #ebebeb; }
  .rc-dp-t{ display:none; }   /* «Rango rápido» sobra en el móvil: los botones se explican solos y así el mes de 6 semanas cabe entero */
  .rc-dp-rap button{ background:#f2f2f2; border-radius:999px; padding:8px 14px; }
  .rc-dp-pie{ position:sticky; bottom:0; z-index:3; background:#fff; }
  /* un poco más apretado que en el ordenador, para que el mes entero quepa con «Aplicar» en un iPhone (664 px a la vista) */
  .rc-dp-rap{ padding:10px 12px; }
  .rc-dp-cal{ padding:10px 14px 14px; }
  .rc-dp-nav{ margin:0 0 6px; }
  .rc-dp-grid button{ height:36px; }
  .rc-dp-ley{ margin:8px 0 0; }
  .rc-dp-pie{ margin:10px -14px -14px; padding:10px 14px; }
}