/* 2026-08-21 (Eduardo: "recrear la sensacion de que estamos mirando el
   menu desde una carta, estilo cuaderno... pasando hoja tras hoja
   deslizando con el dedo"). Propuesta "El cuaderno del menú" validada en
   Artifact. Mismos tokens derivados del tema en vivo que carta_papel.css
   (color-mix() a partir de --t-bg), para que si cambia el color de marca
   desde el admin (site_config.TemaConfig) este cuaderno cambie con él en
   vez de quedarse con un crema/oliva escritos a mano por separado -- ya
   nos pasó una vez con carta_papel.css, no lo repetimos aquí. */

.cuaderno-cabecera, .cuaderno-wrap {
  --papel-fondo: var(--t-bg, #fdf6f0);
  --papel-panel: color-mix(in srgb, var(--t-bg, #fdf6f0) 97%, #000 3%);
  --papel-linea: color-mix(in srgb, var(--t-bg, #fdf6f0) 65%, #000 20%);
  --papel-tinta: var(--t-text, #20241f);
  --papel-tinta-suave: var(--t-muted, #5c5747);
  --papel-acento: var(--t-accent, #5c6b3a);
  --papel-acento-suave: color-mix(in srgb, var(--t-accent, #5c6b3a) 14%, white 86%);
  --papel-resalte: var(--t-highlight, #c9683a);
}

.cuaderno-cabecera {
  background: var(--papel-fondo);
  text-align: center;
  padding: 2.6rem 1.5rem 1.4rem;
}
.cuaderno-eyebrow {
  font-family: 'JetBrains Mono', monospace; font-size: .7rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--papel-acento); font-weight: 600;
}
.cuaderno-titulo {
  font-family: 'Fraunces', serif; font-weight: 700; color: var(--papel-tinta);
  font-size: clamp(2rem, 6vw, 2.8rem); margin: .35rem 0 .3rem;
}
.cuaderno-sub { color: var(--papel-tinta-suave); font-family: 'Newsreader', serif; font-style: italic; margin: 0; }

.cuaderno-wrap {
  background: var(--papel-fondo);
  padding: 1rem 1.5rem 4rem;
  font-family: 'Newsreader', Georgia, serif;
  color: var(--papel-tinta);
}

/* ============ EL CUADERNO ============ */
.cuaderno-demo {
  max-width: 420px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
}

.tabs {
  display: flex; gap: 0; overflow-x: auto; max-width: 100%; padding: 0 .4rem;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: none; font-family: 'JetBrains Mono', monospace; font-size: .7rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--papel-tinta-suave);
  padding: .5rem .7rem; border: none; background: none; cursor: pointer; border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.tab.activa { color: var(--papel-acento); border-color: var(--papel-acento); }
.tab.es-hoy::after { content: '●'; color: var(--papel-resalte); font-size: .5rem; vertical-align: middle; margin-left: .3rem; }

.cuaderno-stage {
  position: relative; width: 100%; max-width: 360px; height: 480px;
  perspective: 1600px;
}

.hoja {
  position: absolute; inset: 0;
  background: var(--papel-panel);
  border-radius: 4px 14px 14px 4px;
  box-shadow: 6px 10px 28px -10px rgba(32,36,31,.22), 0 0 0 1px var(--papel-linea);
  transform-origin: left center;
  display: flex; flex-direction: column;
  overflow: hidden;
  touch-action: pan-y;
  cursor: grab;
  background-image: radial-gradient(var(--papel-linea) .5px, transparent .5px);
  background-size: 3px 3px;
}
.hoja:active { cursor: grabbing; }

/* Encuadernación de espiral en el borde izquierdo */
.hoja::before {
  content: ''; position: absolute; left: -1px; top: 14px; bottom: 14px; width: 16px;
  background-image: radial-gradient(circle at 8px 0, transparent 5px, var(--papel-panel) 5.5px);
  background-size: 100% 26px; background-repeat: repeat-y;
  z-index: 2;
}
.hoja::after {
  content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 2px;
  background-repeat: repeat-y; background-size: 100% 26px;
  background-image: radial-gradient(circle at 1px 13px, var(--papel-linea) 4px, transparent 4.2px);
  z-index: 3;
}

.hoja-inner { padding: 1.5rem 1.5rem 1.3rem 2.1rem; height: 100%; display: flex; flex-direction: column; }

.hoja-cab { display: flex; align-items: baseline; justify-content: space-between; border-bottom: 1px dashed var(--papel-linea); padding-bottom: .7rem; margin-bottom: .9rem; }
.hoja-dia { font-family: 'Fraunces', serif; font-style: italic; font-weight: 600; font-size: 1.5rem; }
.hoja-fecha { font-family: 'JetBrains Mono', monospace; font-size: .72rem; color: var(--papel-tinta-suave); }

.hoja-hoy-cinta {
  position: absolute; top: 10px; right: -30px; background: var(--papel-resalte); color: #fff;
  font-family: 'JetBrains Mono', monospace; font-size: .62rem; font-weight: 700; letter-spacing: .08em;
  padding: .25rem 2.2rem; transform: rotate(40deg); box-shadow: 0 2px 6px rgba(0,0,0,.25); z-index: 4;
}

.hoja-platos { flex: 1; display: flex; flex-direction: column; gap: .55rem; }
.hoja-plato { display: flex; gap: .6rem; align-items: baseline; }
.hoja-curso { font-family: 'JetBrains Mono', monospace; font-size: .68rem; font-weight: 700; color: var(--papel-acento); min-width: 1.1rem; }
.hoja-nombre { font-size: .95rem; }
.hoja-nota { font-style: italic; color: var(--papel-tinta-suave); font-size: .82rem; margin-top: .3rem; padding-top: .6rem; border-top: 1px dashed var(--papel-linea); }

.hoja-pie { display: flex; align-items: baseline; gap: .4rem; padding-top: .8rem; border-top: 1px dashed var(--papel-linea); margin-top: .6rem; }
.hoja-precio { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 1.3rem; color: var(--papel-acento); }
.hoja-incl { font-size: .72rem; color: var(--papel-tinta-suave); }

.hoja-num { position: absolute; bottom: 10px; right: 16px; font-family: 'JetBrains Mono', monospace; font-size: .65rem; color: var(--papel-tinta-suave); opacity: .6; }

.cuaderno-controles { display: flex; align-items: center; gap: 1rem; }
.flecha {
  width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--papel-linea); background: var(--papel-panel);
  color: var(--papel-tinta); font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: border-color .15s, color .15s;
}
.flecha:hover { border-color: var(--papel-acento); color: var(--papel-acento); }
.flecha:disabled { opacity: .3; cursor: default; }
.puntos { display: flex; gap: .4rem; }
.punto { width: 6px; height: 6px; border-radius: 50%; background: var(--papel-linea); transition: background .2s, transform .2s; }
.punto.activo { background: var(--papel-acento); transform: scale(1.3); }

.cuaderno-pista { font-size: .8rem; color: var(--papel-tinta-suave); text-align: center; max-width: 280px; margin: 0; }

.cuaderno-vacio { text-align: center; padding: 4rem 1rem; max-width: 420px; margin: 0 auto; }
.cuaderno-vacio p { color: var(--papel-tinta-suave); margin-bottom: 1.5rem; }

.cuaderno-aviso {
  text-align: center; padding: 2rem; max-width: 500px; margin: 2.5rem auto 0;
  background: var(--papel-panel); border-radius: 12px; border: 1px solid var(--papel-linea);
}
.cuaderno-aviso p { color: var(--papel-tinta-suave); margin: 0 0 1.25rem; font-size: .9rem; }

/* 2026-08-21 (hallazgo real de paso): el menu_semana.html anterior usaba
   ".btn-primary"/".btn-wa-big" para estos dos botones, pero ninguna hoja
   de estilos cargada en esta página los define -- se veían como enlaces
   sin estilo. Se sustituyen por clases propias, sí definidas aquí. */
.cuaderno-btn-primario, .cuaderno-btn-wa {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: 'Newsreader', Georgia, serif; font-size: .95rem; font-weight: 600;
  padding: .75rem 1.5rem; border-radius: 8px; text-decoration: none;
  transition: filter .15s, transform .1s;
}
.cuaderno-btn-primario:hover, .cuaderno-btn-wa:hover { filter: brightness(1.08); }
.cuaderno-btn-primario { background: var(--papel-acento); color: #fff; }
.cuaderno-btn-wa { background: #25d366; color: #fff; }

@media (max-width: 480px) {
  .cuaderno-stage { height: 440px; }
}