/* ==========================================================================
   32 · RESERVAS — la pestaña a la derecha de Pedidos

   Mismo papel que Pedidos: fichas sobre la crema, el que espera con borde
   ámbar. Lo propio es la HOJA de cada ficha —la fecha como la de un calendario
   de pared, en rojo si cae en domingo o festivo— y el calendario de abajo.
   ========================================================================== */

.rsv-barra {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: 1rem;
}
.rsv-barra__secs { display: flex; gap: .4rem; flex-wrap: wrap; }
.rsv-barra__secs .pastilla .ico { width: 1em; height: 1em; }
.rsv-barra > .btn { margin-left: auto; }

.rsv-otra, .rsv-pista { margin: 0 0 1rem; }
.rsv-otra {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding: .6rem .9rem; border-radius: 12px; font-size: .85rem;
  background: var(--ambar-sua); color: #8A530B;
}

.rsvs { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }

.rsv {
  display: grid; grid-template-columns: 62px 1fr; gap: .9rem 1rem; align-items: start;
  background: var(--surface); border: 1px solid var(--linea-sutil);
  border-radius: var(--radio-g); padding: 1rem 1.05rem;
  animation: vista-entra .45s var(--ease) both; animation-delay: calc(var(--i, 0) * 30ms);
}
/* El que espera se destaca sin gritar, como un pedido por confirmar. */
.rsv--pendiente { border-color: var(--naranja); box-shadow: 0 0 0 3px var(--ambar-sua); }
.rsv--pasada { border-color: var(--rojo); box-shadow: 0 0 0 3px var(--rojo-sua); }
.rsv--cancelada { background: var(--crema); }
.rsv--cancelada .rsv__hoja, .rsv--cancelada .rsv__c { opacity: .6; }

/* La hoja del calendario: el mes en la franja, el día grande debajo. */
.rsv__hoja {
  display: flex; flex-direction: column; align-items: center; overflow: hidden;
  border-radius: 12px; background: #fff; border: 1px solid var(--linea-sutil);
  box-shadow: 0 2px 8px rgba(33, 22, 16, .08);
}
.rsv__mes {
  align-self: stretch; text-align: center; padding: .18rem 0;
  background: linear-gradient(100deg, var(--nori-2), var(--nori));
  color: var(--crema); font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.rsv__num { font-family: var(--display); font-size: 1.7rem; line-height: 1.15; color: var(--tinta); }
.rsv__sem { font-size: .66rem; font-weight: 600; color: var(--tinta-3); padding-bottom: .3rem;
            text-transform: uppercase; letter-spacing: .06em; }
.rsv__hoja--roja .rsv__mes { background: linear-gradient(100deg, var(--rojo), var(--rojo-osc)); }
.rsv__hoja--roja .rsv__num { color: var(--rojo); }

.rsv__c { min-width: 0; }
.rsv__fila { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.rsv__hora { font-family: var(--display); font-size: 1.2rem; font-weight: 700;
             font-variant-numeric: tabular-nums; margin-right: .15rem; }
.rsv__nombre { font-size: 1.05rem; margin: .3rem 0 .15rem; overflow-wrap: anywhere; }
.rsv__datos { display: flex; flex-wrap: wrap; gap: .25rem .9rem; margin: .25rem 0 0;
              font-size: .86rem; color: var(--tinta-2); }
.rsv__datos span { display: inline-flex; align-items: center; gap: .35rem; }
.rsv__datos .ico { color: var(--arena); }
.rsv__kit { font-weight: 600; color: #8A530B; }
.rsv__kit .ico { color: var(--naranja); }
.rsv__detalle {
  margin: .5rem 0 0; padding: .45rem .7rem; border-radius: 10px;
  background: var(--crema); font-size: .84rem; line-height: 1.45; color: var(--tinta-2);
  overflow-wrap: anywhere;
}
.rsv__meta { margin: .5rem 0 0; font-size: .76rem; color: var(--tinta-3); }

.rsv__pie { grid-column: 1 / -1; display: flex; gap: .45rem; flex-wrap: wrap; }
.rsv__pie .btn { flex: 1 1 auto; min-width: 104px; justify-content: center; }
.rsv__pie .btn--verde { --bg: var(--verde); --fg: #fff; --bd: var(--verde); flex-grow: 2; }
.rsv__pie .btn--verde:hover { --bg: var(--verde-cl); --bd: var(--verde-cl); }

.chapa--festivo { background: var(--rojo-sua); color: var(--rojo); }

/* Confirmadas: un bloque por día, con cuántas y cuántas personas. */
.rsv-dia + .rsv-dia { margin-top: 1.6rem; }
.rsv-dia__t {
  display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
  font-size: 1.15rem; margin: 0 0 .75rem; padding-bottom: .45rem;
  border-bottom: 1px dashed var(--crema-3);
}
.rsv-dia__t small { font-family: var(--sans); font-size: .8rem; font-weight: 500; color: var(--tinta-3); }
.rsv-dia__n { margin-left: auto; font-family: var(--sans); font-size: .8rem; font-weight: 600;
              color: var(--tinta-3); }

/* La ficha corta, la del día elegido en el calendario. */
.rsv--compacta { grid-template-columns: 1fr; padding: .75rem .85rem; gap: .55rem;
                 box-shadow: none; border-color: var(--linea-sutil); }
.rsv--compacta .rsv__hora { font-size: 1.05rem; }
.rsv--compacta .rsv__nombre { font-size: .95rem; margin-top: .15rem; }
.rsv--compacta .rsv__pie .btn { min-width: 0; }

/* ==========================================================================
   33 · EL CALENDARIO — las confirmadas, con los festivos de Colombia
   ========================================================================== */
.cal-envuelve { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.2rem; align-items: start; }

.cal {
  background: var(--surface); border: 1px solid var(--linea-sutil); border-radius: var(--radio-g);
  padding: 1rem 1.1rem 1.1rem;
}
.cal__cab { display: flex; align-items: center; gap: .5rem; margin-bottom: .9rem; }
.cal__cab h2 { font-size: 1.35rem; text-transform: capitalize; margin: 0 .25rem; min-width: 9.5em; text-align: center; }
.cal__cab h2 small { font-family: var(--sans); font-size: .95rem; font-weight: 500; color: var(--tinta-3); }
.cal__flecha {
  display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%;
  border: 1.5px solid var(--linea); background: var(--surface); color: var(--tinta-2);
  transition: border-color var(--d-rapido) var(--ease), background var(--d-rapido) var(--ease);
}
.cal__flecha:hover { border-color: var(--arena); background: var(--crema); }
.cal__hoy { margin-left: auto; }

.cal__sem, .cal__rejilla { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.cal__sem span {
  text-align: center; font-size: .7rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--tinta-3); padding-bottom: .35rem;
}
.cal__sem span:last-child { color: var(--rojo); }

.cal__d {
  position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 3px;
  min-height: 96px; padding: .35rem .4rem .45rem; text-align: left;
  border-radius: 10px; border: 1px solid var(--linea-sutil); background: #fff;
  cursor: pointer; overflow: hidden;
  transition: border-color var(--d-rapido) var(--ease), box-shadow var(--d-rapido) var(--ease);
}
.cal__d:hover { border-color: var(--arena); }
.cal__d--fuera { background: var(--crema); opacity: .55; }
.cal__d--pasado:not(.cal__d--fuera) { background: #FCFAF6; }
.cal__d--festivo { background: linear-gradient(180deg, rgba(176, 30, 36, .06), rgba(176, 30, 36, .015)); }
.cal__d--hoy { border-color: var(--rojo); border-width: 2px; padding: calc(.35rem - 1px) calc(.4rem - 1px); }
.cal__d--sel { box-shadow: 0 0 0 3px var(--ambar-sua), inset 0 0 0 1px var(--naranja); border-color: var(--naranja); }

.cal__n { font-family: var(--display); font-weight: 700; font-size: .95rem; color: var(--tinta); }
.cal__d--rojo .cal__n { color: var(--rojo); }
.cal__d--hoy .cal__n::after {
  content: 'hoy'; margin-left: .35rem; font-family: var(--sans); font-size: .6rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--rojo);
}
.cal__f {
  font-size: .62rem; font-weight: 600; line-height: 1.2; color: var(--rojo);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cal__r {
  font-size: .68rem; font-weight: 600; line-height: 1.3; padding: .1rem .4rem; border-radius: 6px;
  background: var(--verde-sua); color: var(--verde);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cal__r--kit { background: var(--ambar-sua); color: #8A530B; }
.cal__mas { font-size: .66rem; font-weight: 600; color: var(--tinta-3); }
/* El número de reservas del día: solo en el celular, donde no caben los nombres. */
.cal__cuenta { display: none; }

.cal__ley { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin: .85rem 0 0; font-size: .75rem; color: var(--tinta-3); }
.cal__ley span { display: inline-flex; align-items: center; gap: .35rem; }
.cal__ley i { width: .8rem; height: .8rem; border-radius: 4px; display: inline-block; }
.cal__ley-f { background: var(--rojo-sua); border: 1px solid rgba(176, 30, 36, .35); }
.cal__ley-r { background: var(--verde-sua); border: 1px solid rgba(21, 122, 71, .35); }
.cal__ley-k { background: var(--ambar-sua); border: 1px solid rgba(240, 144, 30, .45); }
.cal__ley-h { border: 2px solid var(--rojo); }

/* El día elegido, a la derecha: lo que se abre al tocar una casilla. */
.cal__dia {
  position: sticky; top: 1rem; display: flex; flex-direction: column; gap: .7rem;
  background: var(--surface); border: 1px solid var(--linea-sutil); border-radius: var(--radio-g);
  padding: 1rem 1.05rem;
}
.cal__dia h3 { font-size: 1.15rem; margin: 0; }
.cal__dia-fest { display: flex; align-items: center; gap: .4rem; margin: -.3rem 0 0;
                 font-size: .82rem; font-weight: 600; color: var(--rojo); }
.cal__dia-n, .cal__dia-vacio { margin: 0; font-size: .84rem; color: var(--tinta-3); }
.cal__dia-lista { display: grid; gap: .6rem; }
.cal__nueva { align-self: flex-start; }
.rsv-aviso {
  display: flex; align-items: center; gap: .45rem; padding: .55rem .75rem; border-radius: 10px;
  background: var(--ambar-sua); color: #8A530B; font-size: .82rem; font-weight: 600; text-align: left;
  border: 1px solid rgba(240, 144, 30, .35);
}

/* El cajón: dos campos por renglón y el aviso de la fecha. */
.rsv-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .8rem; }
.rsv-nota { display: flex; align-items: flex-start; gap: .45rem; margin: .7rem 0 0;
            font-size: .8rem; line-height: 1.45; color: var(--tinta-3); }
.rsv-nota .ico { flex: none; margin-top: .1rem; }
.rsv-nota--ojo { color: #8A530B; }
.rsv-nota:empty { display: none; }

/* 34 · Pantalla angosta ------------------------------------------------------ */
@media (max-width: 1080px) {
  .cal-envuelve { grid-template-columns: 1fr; }
  .cal__dia { position: static; }
}
@media (max-width: 700px) {
  .rsvs { grid-template-columns: 1fr; }
  .rsv-barra > .btn { margin-left: 0; width: 100%; justify-content: center; }
  /* Dos por fila, no una tira que se desliza: deslizada y sin barra, en un
     celular «Calendario» y «Canceladas» quedaban fuera del borde y nadie
     sabía que existían (7 de octubre de 2026). */
  .rsv-barra__secs { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .rsv-barra__secs .pastilla { justify-content: center; }
  .cal { padding: .8rem .6rem; }
  .cal__cab h2 { font-size: 1.1rem; min-width: 0; flex: 1; }
  .cal__sem, .cal__rejilla { gap: 3px; }
  .cal__d { min-height: 52px; padding: .3rem; align-items: center; }
  .cal__d--hoy { padding: calc(.3rem - 1px); }
  .cal__d--hoy .cal__n::after { display: none; }
  .cal__r, .cal__f, .cal__mas { display: none; }
  .cal__cuenta {
    display: grid; place-items: center; min-width: 1.2rem; height: 1.2rem; padding: 0 .25rem;
    border-radius: 99px; background: var(--verde); color: #fff; font-size: .66rem; font-weight: 700;
  }
  .cal__d--festivo::after {
    content: ''; position: absolute; top: 5px; right: 5px; width: 5px; height: 5px;
    border-radius: 50%; background: var(--rojo);
  }
  .rsv-dos { grid-template-columns: 1fr; }
}