/* Today's Coffee Taiwan — tema oscuro para todas las páginas menos la portada (pedido de Emi, 21/10/2026: «que las otras
   pestañas se vean como la portada»). Va DESPUÉS de estilos.css y solo cambia colores, letras y algunos detalles: la
   estructura de cada página sigue igual. Mismos tonos que css/portada.css («01 · Oscuro premium», acento terracota café).
   Lo pone paginas_fijas.py → comun() en cada página (junto con la lluvia de granos, js/lluvia-cafe.js). */
:root {
  --papel: #060708;            /* fondo */
  --papel-2: #101416;
  --tinta: #eef3f1;            /* texto */
  --tinta-suave: #a7b2b0;
  --bosque: #f0a877;           /* acento para textos y links (sobre fondo oscuro) */
  --bosque-claro: rgba(240, 168, 119, .12);
  --durazno: #e8956b;
  --durazno-oscuro: #f0a877;
  --linea: #232a2d;
  --blanco: #0d1113;           /* superficie de tarjetas y paneles */
  --acento: #a9532c;           /* fondo de botones con texto blanco */
  --acento-2: #943a2a;
  --claro-1: #f6be82;
  --linea-2: rgba(255, 255, 255, .16);
  --vidrio: rgba(255, 255, 255, .04);
  --vidrio-2: rgba(255, 255, 255, .08);
  --serif: Sora, Inter, "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif;
  --sans: Inter, "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: dark;
}
body {
  background:
    radial-gradient(1100px 560px at 12% -8%, rgba(169, 83, 44, .26), transparent 62%),
    radial-gradient(900px 480px at 92% -6%, rgba(246, 190, 130, .10), transparent 60%),
    var(--papel);
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
}
::selection { background: rgba(169, 83, 44, .55); color: #fff; }
h1, h2, h3 { font-weight: 600; letter-spacing: -.03em; text-wrap: balance; }
:lang(zh) h1, :lang(zh) h2, :lang(zh) h3 { letter-spacing: 0; }
h1 { line-height: 1.08; }
a { color: var(--claro-1); text-underline-offset: 3px; }
a:hover { color: #fff; }
.etiqueta { color: var(--claro-1); }
mark { background: rgba(169, 83, 44, .35); color: inherit; }

/* Encabezado de vidrio, como el de la portada */
.cabecera { background: rgba(6, 7, 8, .72); border-bottom-color: var(--linea); -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); }
.marca { color: var(--tinta); letter-spacing: -.02em; }
.marca span { color: var(--claro-1); }
.menu a { color: var(--tinta-suave); }
.menu a:hover, .menu a[aria-current="page"] { color: #fff; }
.boton-menu { border-color: var(--linea-2); color: var(--tinta); background: var(--vidrio); }
@media (max-width: 640px) { .menu.abierto { background: transparent; } }

/* Botones: degradado terracota con texto blanco, y de vidrio */
.boton-principal, .chip-puntos { background: linear-gradient(100deg, var(--acento) 0%, var(--acento-2) 100%); color: #fff !important; box-shadow: inset 0 1px 0 rgba(246, 190, 130, .45), 0 14px 34px -14px rgba(169, 83, 44, .75); }
.boton-principal:hover { background: linear-gradient(100deg, #b85c33 0%, #a1402e 100%); color: #fff; }
.boton { transition: transform .35s cubic-bezier(.19, 1, .22, 1), background-color .2s, border-color .2s; }
.boton:hover { transform: translateY(-2px); }
.boton-secundario { background: var(--vidrio); color: var(--tinta); border: 1px solid var(--linea-2); }
.boton-secundario:hover { background: var(--vidrio-2); color: #fff; }
.boton-line, .boton-line:hover { color: #fff; }
.coincidencia, .sello.lleno { background: var(--acento); border-color: var(--acento); color: #fff; }
.fav-cuenta { background: var(--claro-1); color: #1a0f08; }
.opcion { border-color: var(--linea-2); }
.opcion[aria-pressed="true"] { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
@media (prefers-reduced-motion: reduce) { .boton, .boton:hover { transition: none; transform: none; } }

/* Tarjetas y paneles: superficie oscura con borde fino y un brillo arriba */
.paso, .tarjeta-guia, .panel, .tarjeta-tienda, .directo, .pedido-tost, .vacio, .mapa, .ficha-flotante {
  background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .01)), var(--blanco);
  border-color: var(--linea);
}
.ficha-flotante { box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .9); }
.cifra { background: var(--papel-2); }
input, select, textarea { background: var(--papel-2); border-color: var(--linea-2); color: var(--tinta); }
input::placeholder, textarea::placeholder { color: #7f8a89; }
.fila-copiar input { background: var(--papel-2); }

/* Detalles que tenían colores claros escritos a mano */
.bolsa { color: #fff; box-shadow: 0 20px 40px -22px rgba(0, 0, 0, .9); }
.bolsa .ilustra { color: #1f1a17; }
.fav { border-color: var(--linea-2); }
.fav-flota { background: rgba(6, 7, 8, .66); color: var(--tinta); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.ef-res { background-image: linear-gradient(100deg, rgba(169, 83, 44, 0) 0, rgba(169, 83, 44, .55) .35em, rgba(201, 104, 60, .6) 50%, rgba(169, 83, 44, .55) calc(100% - .35em), rgba(169, 83, 44, 0) 100%); }
.estado-pendiente, .aviso.error { background: rgba(169, 83, 44, .22); color: var(--claro-1); }
.estado-anulado { background: #1a1f21; color: var(--tinta-suave); }
.bean { fill: #b97845; stroke: var(--papel); }
.gana-beans { color: #e0a774; }
.ef-cinta .grupo a { background: var(--blanco); border-color: var(--linea); color: var(--tinta); }
.ef-cinta .grupo a:hover { border-color: var(--linea-2); }
.tueste .marcador { background: var(--tinta); border-color: var(--papel); }
.mapa .punto i { border-color: var(--papel); box-shadow: 0 0 0 1px var(--tinta-suave); }
.qr-pago img { background: #fff; }

/* Pie como el de la portada */
.pie { background: #0b0e10; border-top-color: var(--linea); }
.pie a { color: var(--tinta-suave); }
.pie a:hover { color: #fff; }

/* Lluvia chiquita de granos de café (js/lluvia-cafe.js), igual que en la portada */
.llu-c { position: fixed; inset: 0; z-index: 9990; pointer-events: none; overflow: hidden; contain: strict; }
.llu { position: absolute; display: block; margin: 0; padding: 0; line-height: 0; pointer-events: none; will-change: transform, opacity; }
.llu svg { display: block; width: 100%; height: 100%; }
@media (prefers-reduced-motion: reduce) { .llu-c { display: none; } }

/* Números escritos junto a las barritas y bloque «Este café en números» (auditoría SEO 22/10/2026) */
.fila-perfil { grid-template-columns: 4.5em 1fr auto; }
.fila-perfil .valor { font-size: .8rem; color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.tueste-texto { margin: 6px 0 0; font-size: .85rem; color: var(--tinta-suave); }
.datos-propios #ficha-extra { max-width: 46em; }
.datos-propios #ficha-extra p { margin: 0 0 10px; }
.datos-propios .historial { font-variant-numeric: tabular-nums; }
.ex-guias { margin-top: 16px !important; }

/* Guías en el pie de todas las páginas (paginas_fijas.py → comun) */
.guias-pie{width:100%;display:flex;flex-wrap:wrap;gap:2px 0;font-size:.82rem;line-height:1.9;margin-bottom:10px}
.guias-pie a{color:var(--tinta-suave,#a7b2b0);text-decoration:none}
.guias-pie a:hover{color:#fff;text-decoration:underline}