/* ============================================================
   Washi & Frosted — Giappone 2026
   Sistema condiviso. Verrà inlinato in ogni HTML finale.
   ============================================================ */

:root {
  /* Base washi paper */
  --bg-page:        #FAFAF7;
  --bg-paper:       #F5F4EE;
  --ink-primary:    #0A0A0A;
  --ink-secondary:  #3A3A3A;
  --ink-tertiary:   #6B6B6B;
  --ink-muted:      #A8A8A8;

  /* Glass */
  --glass-bg:        rgba(255, 255, 255, 0.62);
  --glass-bg-thin:   rgba(255, 255, 255, 0.45);
  --glass-bg-thick:  rgba(255, 255, 255, 0.82);
  --glass-tint:      rgba(250, 250, 247, 0.12);
  --glass-border:    rgba(255, 255, 255, 0.85);
  --glass-edge:      rgba(0, 0, 0, 0.06);
  --glass-shadow:    0 8px 32px rgba(20, 20, 30, 0.08),
                     0 2px 6px rgba(20, 20, 30, 0.04);

  /* Accents */
  --accent-confirmed: #1E6F4F;
  --accent-mandatory: #B23A2E;
  --accent-claude:    #2A4D8F;
  --accent-personal:  #B36B7F;

  --ease: cubic-bezier(0.32, 0.72, 0, 1);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

html {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
               system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.42;
  color: var(--ink-primary);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  background: var(--bg-page);
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* Atmospheric tint — extremely subtle washes behind glass so blur reveals colour */
body::before, body::after {
  content: "";
  position: fixed;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(60px);
  z-index: 0;
}
body::before {
  width: 70vw; height: 70vw;
  top: -20vw; right: -25vw;
  background: radial-gradient(circle, rgba(42,77,143,0.10), rgba(42,77,143,0) 65%);
}
body::after {
  width: 60vw; height: 60vw;
  bottom: -15vw; left: -20vw;
  background: radial-gradient(circle, rgba(179,107,127,0.09), rgba(179,107,127,0) 65%);
}

/* Faint washi grain — single-layer dot pattern, very low contrast */
.washi-grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    radial-gradient(circle at 25% 30%, rgba(20,20,30,0.018) 1px, transparent 1.5px),
    radial-gradient(circle at 75% 70%, rgba(20,20,30,0.014) 1px, transparent 1.5px);
  background-size: 7px 7px, 11px 11px;
  mix-blend-mode: multiply;
}

/* App shell */
.screen {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  padding: 0 20px 140px;
  max-width: 430px;
  margin: 0 auto;
}

/* ----- Status bar (neutral, generic) ----- */
.statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  padding: 0 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-primary);
  font-variant-numeric: tabular-nums;
}
.statusbar-right {
  display: flex; align-items: center; gap: 6px;
}
.statusbar-icon {
  display: inline-block;
  width: 16px; height: 11px;
}

/* ----- Typography ----- */
.t-display { font-size: 34px; font-weight: 700; letter-spacing: -0.4px; line-height: 1.08; }
.t-title1  { font-size: 28px; font-weight: 700; letter-spacing: -0.3px; line-height: 1.14; }
.t-title2  { font-size: 22px; font-weight: 600; letter-spacing: -0.2px; line-height: 1.22; }
.t-headline { font-size: 17px; font-weight: 600; letter-spacing: -0.1px; }
.t-body     { font-size: 17px; font-weight: 400; }
.t-callout  { font-size: 16px; font-weight: 400; }
.t-sub      { font-size: 15px; font-weight: 400; color: var(--ink-secondary); }
.t-foot     { font-size: 13px; font-weight: 400; color: var(--ink-tertiary); }
.t-cap      { font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-tertiary); }
.tabular { font-variant-numeric: tabular-nums; }
.ink-secondary { color: var(--ink-secondary); }
.ink-tertiary  { color: var(--ink-tertiary); }
.ink-muted     { color: var(--ink-muted); }

/* ----- Page header ----- */
.page-head { padding: 12px 4px 20px; }
.page-head h1 { margin: 0 0 4px; }
.page-head .sub { color: var(--ink-tertiary); font-size: 13px; }

/* ----- Glass ----- */
.glass {
  position: relative;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border-radius: 24px;
  box-shadow: var(--glass-shadow);
  border-top: 1px solid var(--glass-border);
  border-bottom: 0.5px solid var(--glass-edge);
}
.glass-thick {
  background: var(--glass-bg-thick);
}

/* ----- Pills (status) ----- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 4px 9px;
  border-radius: 8px;
  white-space: nowrap;
  line-height: 1;
}
.pill-confirmed { background: rgba(30,111,79,0.12);  color: var(--accent-confirmed); }
.pill-mandatory { background: rgba(178,58,46,0.12);  color: var(--accent-mandatory); }
.pill-claude    { background: rgba(42,77,143,0.12);  color: var(--accent-claude); }
.pill-personal  { background: rgba(179,107,127,0.14); color: var(--accent-personal); }
.pill-neutral   { background: rgba(20,20,30,0.06);   color: var(--ink-secondary); }
.pill-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ----- Event card ----- */
.card {
  padding: 18px 20px;
  margin-bottom: 12px;
}
.card-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
.card-time {
  font-size: 13px; font-weight: 600; color: var(--ink-secondary);
  font-variant-numeric: tabular-nums;
}
.card-title { margin: 8px 0 2px; font-size: 17px; font-weight: 600; letter-spacing: -0.1px; }
.card-sub   { font-size: 15px; color: var(--ink-secondary); }
.card-meta  { font-size: 13px; color: var(--ink-tertiary); margin-top: 8px; font-variant-numeric: tabular-nums; }
.card-chev  { color: var(--ink-muted); margin-left: 8px; font-size: 18px; line-height: 1; }

.card-compact {
  padding: 14px 18px;
  margin-bottom: 8px;
  display: grid;
  grid-template-columns: 54px 1fr auto auto;
  align-items: center;
  gap: 12px;
}
.card-compact .ev-time {
  font-size: 14px; font-weight: 600; color: var(--ink-secondary);
  font-variant-numeric: tabular-nums; letter-spacing: -0.2px;
}
.card-compact .ev-title { font-size: 15px; font-weight: 600; line-height: 1.25; }
.card-compact .ev-sub   { font-size: 13px; color: var(--ink-tertiary); margin-top: 1px; }

/* ----- Hero "Prossimo" ----- */
.hero {
  padding: 24px 24px 22px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
}
.hero-label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--accent-mandatory);
}
.hero-title { margin: 8px 0 14px; }
.hero-count {
  font-size: 44px; font-weight: 700; letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
  line-height: 1; color: var(--ink-primary);
}
.hero-count .unit { font-size: 22px; font-weight: 600; color: var(--ink-tertiary); letter-spacing: -0.2px; margin-left: 4px; }
.hero-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; gap: 12px; }
.hero-when   { font-size: 15px; color: var(--ink-secondary); font-variant-numeric: tabular-nums; }
.hero-where  { font-size: 15px; color: var(--ink-tertiary); }
.hero-pill-abs { position: absolute; top: 22px; right: 22px; }
/* Accent tint per status */
.hero.tint-mandatory { background: linear-gradient(140deg, rgba(178,58,46,0.10), rgba(255,255,255,0.55) 70%); }
.hero.tint-confirmed { background: linear-gradient(140deg, rgba(30,111,79,0.10), rgba(255,255,255,0.55) 70%); }
.hero.tint-claude    { background: linear-gradient(140deg, rgba(42,77,143,0.10), rgba(255,255,255,0.55) 70%); }

/* ----- Section header ----- */
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 24px 4px 14px;
}
.section-head h2 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.2px; }
.section-head .count { font-size: 13px; color: var(--ink-tertiary); font-variant-numeric: tabular-nums; }

/* ----- Filter chips ----- */
.chip-row {
  display: flex; gap: 8px; padding: 4px 4px 16px;
  overflow-x: auto;
  scrollbar-width: none;
}
.chip-row::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto;
  padding: 8px 14px;
  font-size: 13px; font-weight: 500;
  border-radius: 14px;
  background: rgba(255,255,255,0.5);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  border-top: 1px solid var(--glass-border);
  border-bottom: 0.5px solid var(--glass-edge);
  color: var(--ink-secondary);
  white-space: nowrap;
  transition: transform 180ms var(--ease);
}
.chip:active { transform: scale(0.96); }
.chip.is-active {
  background: var(--ink-primary);
  color: #fff;
  border-top-color: rgba(255,255,255,0.2);
}

/* ----- Tab bar ----- */
.tabbar {
  position: fixed;
  left: 20px; right: 20px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  max-width: 390px;
  margin: 0 auto;
  height: 64px;
  border-radius: 28px;
  background: rgba(255,255,255,0.82);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  backdrop-filter: blur(28px) saturate(200%);
  box-shadow: 0 12px 36px rgba(20,20,30,0.10), 0 2px 8px rgba(20,20,30,0.04);
  border-top: 1px solid var(--glass-border);
  border-bottom: 0.5px solid var(--glass-edge);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  z-index: 20;
}
.tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 100%;
  color: var(--ink-tertiary);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: transform 180ms var(--ease), color 180ms;
}
.tab:active { transform: scale(0.92); }
.tab .ico {
  width: 24px; height: 24px; display: block;
  stroke: currentColor; fill: none; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.tab.is-active { color: var(--ink-primary); }
.tab.is-active .ico { stroke-width: 2.2; }
.tab.is-active .tab-label { font-weight: 600; }

/* ----- Ticket stub ----- */
.ticket {
  position: relative;
  margin-bottom: 14px;
  padding: 18px 20px 16px;
  border-radius: 22px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  box-shadow: var(--glass-shadow);
  border-top: 1px solid var(--glass-border);
  border-bottom: 0.5px solid var(--glass-edge);
  overflow: hidden;
}
.ticket-head {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 12px;
  align-items: center;
}
.ticket-ico {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(255,255,255,0.55);
  border: 0.5px solid var(--glass-edge);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
}
.ticket-title { font-size: 16px; font-weight: 600; letter-spacing: -0.1px; }
.ticket-route { font-size: 13px; color: var(--ink-tertiary); margin-top: 2px; }
.ticket-divider {
  margin: 14px -20px 12px;
  position: relative;
  height: 16px;
}
.ticket-divider::before {
  content: ""; position: absolute; left: -8px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--bg-page);
  box-shadow: inset 0 0 0 0.5px var(--glass-edge);
}
.ticket-divider::after {
  content: ""; position: absolute; right: -8px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--bg-page);
  box-shadow: inset 0 0 0 0.5px var(--glass-edge);
}
.ticket-divider .dashed {
  position: absolute; left: 14px; right: 14px; top: 50%;
  border-top: 1px dashed rgba(20,20,30,0.18);
}
.ticket-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.ticket-code {
  font-size: 18px; font-weight: 700; letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.ticket-code-label { font-size: 10px; letter-spacing: 0.08em; color: var(--ink-tertiary); text-transform: uppercase; }
.ticket-action {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,0.7);
  border-top: 1px solid var(--glass-border);
  border-bottom: 0.5px solid var(--glass-edge);
  font-size: 13px; font-weight: 600;
  color: var(--ink-primary);
  transition: transform 180ms var(--ease);
}
.ticket-action:active { transform: scale(0.96); }

.ticket.today {
  background: linear-gradient(140deg, rgba(178,58,46,0.08), rgba(255,255,255,0.65) 60%);
  box-shadow: 0 10px 36px rgba(178,58,46,0.10), 0 2px 6px rgba(20,20,30,0.04);
}

/* ----- Day section (itinerary) ----- */
.day-section { margin-bottom: 28px; }
.day-head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 6px 4px 14px;
  border-bottom: 1px solid rgba(20,20,30,0.06);
  margin-bottom: 12px;
}
.day-date { display: flex; align-items: baseline; gap: 10px; }
.day-num { font-size: 26px; font-weight: 700; letter-spacing: -0.4px; font-variant-numeric: tabular-nums; }
.day-num .mon { font-size: 14px; font-weight: 600; color: var(--ink-tertiary); margin-left: 2px; letter-spacing: 0.04em; text-transform: uppercase; }
.day-dow { font-size: 13px; color: var(--ink-tertiary); text-transform: uppercase; letter-spacing: 0.08em; }
.day-loc { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-secondary); text-align: right; }
.day-num.is-today { color: var(--accent-mandatory); }
.day-num.is-today .mon { color: var(--accent-mandatory); }

/* ----- Info-page sections ----- */
.info-section { margin-bottom: 28px; }
.info-head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 6px 4px 10px;
}
.info-head h2 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.2px; }
.info-head .accent-bar {
  width: 28px; height: 3px; border-radius: 2px; background: currentColor;
  display: block; margin-bottom: 6px;
}
.info-head.emergencia h2 { color: var(--accent-mandatory); }

.info-card {
  padding: 14px 18px;
  margin-bottom: 10px;
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 14px;
  border-radius: 20px;
}
.info-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.55);
  border: 0.5px solid var(--glass-edge);
  font-size: 20px;
}
.info-icon.danger { background: rgba(178,58,46,0.12); color: var(--accent-mandatory); }
.info-title { font-size: 15px; font-weight: 600; }
.info-sub   { font-size: 13px; color: var(--ink-tertiary); margin-top: 2px; }
.info-tel   { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums;
              font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
              letter-spacing: -0.2px; }
.info-action {
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.7);
  border-top: 1px solid var(--glass-border);
  border-bottom: 0.5px solid var(--glass-edge);
  transition: transform 180ms var(--ease);
}
.info-action:active { transform: scale(0.94); }
.info-action svg { width: 20px; height: 20px; stroke: var(--ink-primary); stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }

.info-stack { padding: 8px 18px 14px; }
.info-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-top: 1px solid rgba(20,20,30,0.06);
}
.info-row:first-child { border-top: 0; }
.info-row .lbl { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-tertiary); }
.info-row .val { font-size: 15px; font-weight: 500; }

/* ----- Placeholders ----- */
.placeholder-photo {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--bg-paper), rgba(42,77,143,0.08));
  border: 1px solid var(--glass-edge);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--ink-tertiary);
  overflow: hidden;
}
.placeholder-photo__icon { width: 40px; height: 40px; opacity: 0.6; }
.placeholder-photo__caption {
  font-size: 10px; font-weight: 600; letter-spacing: 0.12em;
  opacity: 0.55; text-transform: uppercase;
}

.placeholder-qr {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #fff;
  border-radius: 16px;
  border: 0.5px solid var(--glass-edge);
  padding: 12px;
  position: relative;
}
.placeholder-qr svg { width: 100%; height: 100%; display: block; }
.placeholder-qr__caption {
  position: absolute; bottom: 6px; left: 0; right: 0;
  text-align: center;
  font-size: 9px; font-weight: 600; letter-spacing: 0.12em;
  opacity: 0.5; text-transform: uppercase; color: var(--ink-tertiary);
}

.placeholder-pdf {
  display: flex; align-items: center; gap: 12px;
  padding: 14px;
  border-radius: 14px;
  background: rgba(255,255,255,0.55);
  border: 0.5px solid var(--glass-edge);
}
.placeholder-pdf__ico {
  width: 44px; height: 56px;
  border-radius: 6px;
  background: linear-gradient(160deg, #fff, var(--bg-paper));
  border: 0.5px solid var(--glass-edge);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: var(--accent-mandatory);
  font-weight: 700;
}
.placeholder-pdf__body { flex: 1; min-width: 0; }
.placeholder-pdf__lines { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; }
.placeholder-pdf__line {
  height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, rgba(20,20,30,0.10), rgba(20,20,30,0.04));
}
.placeholder-pdf__line.short { width: 60%; }
.placeholder-pdf__caption {
  font-size: 9px; font-weight: 600; letter-spacing: 0.12em;
  opacity: 0.5; text-transform: uppercase; color: var(--ink-tertiary);
  display: block; margin-top: 8px;
}

.placeholder-map {
  position: relative;
  width: 100%;
  height: 84px;
  border-radius: 14px;
  overflow: hidden;
  background:
    linear-gradient(0deg,  rgba(20,20,30,0.04) 0.5px, transparent 0.5px) 0 0 / 22px 22px,
    linear-gradient(90deg, rgba(20,20,30,0.04) 0.5px, transparent 0.5px) 0 0 / 22px 22px,
    linear-gradient(135deg, var(--bg-paper), #fff);
  border: 0.5px solid var(--glass-edge);
  display: flex; align-items: center; justify-content: center;
}
.placeholder-map svg { width: 28px; height: 28px; color: var(--accent-mandatory); }
.placeholder-map__caption {
  position: absolute; bottom: 4px; right: 8px;
  font-size: 9px; font-weight: 600; letter-spacing: 0.12em;
  opacity: 0.5; text-transform: uppercase; color: var(--ink-tertiary);
}

.placeholder-avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(160deg, rgba(255,255,255,0.85), rgba(42,77,143,0.18));
  border: 0.5px solid var(--glass-edge);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 600;
  color: var(--accent-claude);
  letter-spacing: -0.4px;
}

/* ----- Disclosure (passaporti) ----- */
details.disc { padding: 0; margin: 0; }
details.disc > summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 18px;
  display: flex; align-items: center; justify-content: space-between;
}
details.disc > summary::-webkit-details-marker { display: none; }
details.disc > summary .chev {
  width: 20px; height: 20px; color: var(--ink-tertiary);
  transition: transform 220ms var(--ease);
}
details.disc[open] > summary .chev { transform: rotate(90deg); }
details.disc .disc-body { padding: 0 18px 14px; }

/* ----- Misc utilities ----- */
.row    { display: flex; align-items: center; gap: 10px; }
.col    { display: flex; flex-direction: column; }
.grow   { flex: 1; min-width: 0; }
.gap-2  { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; }
.mt-1   { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; }
.mb-2   { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; }

/* ----- Tap feedback ----- */
.tappable { transition: transform 180ms var(--ease); }
.tappable:active { transform: scale(0.98); }

/* ----- Larger screens — center the column ----- */
@media (min-width: 480px) {
  body {
    background: var(--bg-page);
  }
}

/* ============================================================
   Icone inline (sostituzione emoji)
   ============================================================ */

/* Pill: icona piccola allineata al label */
.pill { gap: 5px; padding: 4px 9px 4px 8px; line-height: 1; }
.pill-ico {
  width: 11px; height: 11px;
  flex: 0 0 11px;
  display: inline-block;
  stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
  fill: none;
}
.pill-ico path[fill="currentColor"],
.pill-ico circle[fill="currentColor"],
.pill-ico rect[fill="currentColor"] { stroke: none; }

/* Tile (ticket-ico / info-icon): rimuovo font-size e do dimensione all'SVG */
.ticket-ico, .info-icon { font-size: 0; padding: 10px; }
.ticket-ico .tile-ico-svg, .info-icon .tile-ico-svg {
  width: 100%; height: 100%;
  display: block;
  stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
  fill: none;
}
.tile-ico-svg path[fill="currentColor"],
.tile-ico-svg circle[fill="currentColor"],
.tile-ico-svg rect[fill="currentColor"],
.tile-ico-svg ellipse[fill="currentColor"] { stroke: none; }

/* Varianti cromatiche per categoria */
.tile-transport { background: rgba(42,77,143,0.10);  color: var(--accent-claude); }
.tile-hotel     { background: rgba(20,20,30,0.05);   color: var(--ink-secondary); }
.tile-onsen     { background: rgba(42,77,143,0.10);  color: var(--accent-claude); }
.tile-event     { background: rgba(178,58,46,0.10);  color: var(--accent-mandatory); }
.tile-gaming    { background: rgba(178,58,46,0.10);  color: var(--accent-mandatory); }
.tile-food      { background: rgba(179,107,127,0.14); color: var(--accent-personal); }
.tile-doc       { background: rgba(42,77,143,0.10);  color: var(--accent-claude); }
.tile-pdf       { background: rgba(178,58,46,0.10);  color: var(--accent-mandatory); }
.tile-civic     { background: rgba(42,77,143,0.10);  color: var(--accent-claude); }
.tile-emergency { background: rgba(178,58,46,0.12);  color: var(--accent-mandatory); }

/* Override: ripristina font-size per emoji testuali (quando non c'è SVG figlio) */
.ticket-ico:not(:has(svg)),
.info-icon:not(:has(svg)) {
  font-size: 22px;
}
/* Fallback per browser senza :has() — usa pseudo-attributo */
.ticket-ico[data-emoji],
.info-icon[data-emoji] {
  font-size: 22px;
}