/* ==========================================================
   Suitcase.exe v3 — "Glossy travel stationery, 2004"
   Cristal esmerilado + gominolas + papelería de viaje
   (tarjetas de embarque, sellos, sobres) con alma Y2K.
   Se carga después de y2k.css y redefine sus componentes.
   ========================================================== */

:root {
  --f-display: "Unbounded", "Sniglet", system-ui, sans-serif;
  --f-body: "M PLUS Rounded 1c", system-ui, sans-serif;
  --f-pixel: "Silkscreen", monospace;
  --f-hand: "Gochi Hand", "M PLUS Rounded 1c", cursive;
  --glass: rgba(255, 255, 255, .72);
  --glass-strong: rgba(255, 255, 255, .9);
  --glass-bd: rgba(255, 255, 255, .95);
  --line: rgba(150, 110, 210, .2);
  --line-strong: rgba(150, 110, 210, .35);
  --card: #ffffff;
  --ring-track: #f2e8fb;
  --shadow-1: 0 1px 0 rgba(255,255,255,.9) inset, 0 2px 6px -2px rgba(110, 60, 160, .12);
  --shadow-2: 0 1px 0 rgba(255,255,255,.9) inset, 0 22px 44px -22px rgba(110, 60, 170, .45), 0 4px 12px -6px rgba(110, 60, 170, .18);
  --shadow-3: 0 30px 70px -30px rgba(110, 60, 170, .55), 0 8px 20px -10px rgba(110, 60, 170, .25);
  --r-xl: 28px;
  --r-lg: 22px;
  --r-md: 16px;
  --gel-pink: linear-gradient(180deg, #ffc2e4 0%, #ff7cc6 48%, #ff52ad 52%, #ff86cc 100%);
}
[data-skin="aqua"] { --ring-track: #e3f1ff; --line: rgba(80, 140, 210, .22); --line-strong: rgba(80, 140, 210, .38); --gel-pink: linear-gradient(180deg, #bfe2ff 0%, #5fb0ff 48%, #2f8fff 52%, #6ab9ff 100%); }
[data-skin="lilac"] { --ring-track: #efe6ff; --gel-pink: linear-gradient(180deg, #e6d2ff 0%, #b98aff 48%, #9b66f5 52%, #c39cff 100%); }
[data-skin="night"] {
  --glass: rgba(36, 26, 66, .72);
  --glass-strong: rgba(42, 30, 76, .92);
  --glass-bd: rgba(255, 255, 255, .12);
  --line: rgba(200, 170, 255, .16);
  --line-strong: rgba(200, 170, 255, .3);
  --card: #2a1f4d;
  --ring-track: #3a2c66;
  --shadow-1: 0 1px 0 rgba(255,255,255,.06) inset, 0 2px 6px -2px rgba(0,0,0,.4);
  --shadow-2: 0 1px 0 rgba(255,255,255,.06) inset, 0 22px 44px -22px rgba(0,0,0,.7);
  --shadow-3: 0 30px 70px -30px rgba(0,0,0,.8);
}

/* ---------- base y fondo ---------- */
body {
  font-family: var(--f-body);
  background-color: #fbe9f6;
  background-image:
    radial-gradient(60vw 50vh at 8% 0%, rgba(255, 170, 220, .55), transparent 70%),
    radial-gradient(50vw 45vh at 100% 12%, rgba(150, 205, 255, .55), transparent 70%),
    radial-gradient(60vw 60vh at 85% 100%, rgba(200, 170, 255, .5), transparent 70%),
    radial-gradient(50vw 50vh at 0% 95%, rgba(255, 210, 235, .6), transparent 70%),
    linear-gradient(180deg, #fff3fb, #f6ecff);
  background-attachment: fixed;
}
[data-skin="aqua"] body { background-color: #e8f6ff; background-image: radial-gradient(60vw 50vh at 8% 0%, rgba(140, 220, 255, .6), transparent 70%), radial-gradient(50vw 45vh at 100% 12%, rgba(180, 200, 255, .55), transparent 70%), radial-gradient(60vw 60vh at 85% 100%, rgba(150, 240, 230, .45), transparent 70%), linear-gradient(180deg, #f2fbff, #eaf2ff); }
[data-skin="lilac"] body { background-color: #f3eaff; background-image: radial-gradient(60vw 50vh at 8% 0%, rgba(215, 180, 255, .6), transparent 70%), radial-gradient(50vw 45vh at 100% 12%, rgba(255, 190, 235, .5), transparent 70%), radial-gradient(60vw 60vh at 85% 100%, rgba(180, 170, 255, .5), transparent 70%), linear-gradient(180deg, #faf4ff, #f0e8ff); }
[data-skin="night"] body { background-color: #150f2b; background-image: radial-gradient(60vw 50vh at 8% 0%, rgba(255, 90, 180, .22), transparent 70%), radial-gradient(50vw 45vh at 100% 12%, rgba(90, 150, 255, .2), transparent 70%), radial-gradient(60vw 60vh at 85% 100%, rgba(150, 100, 255, .25), transparent 70%), linear-gradient(180deg, #1a1236, #110c24); }
/* rejilla de puntos muy suave + grano */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(rgba(150, 110, 210, .16) 1px, transparent 1.4px);
  background-size: 22px 22px;
  mask-image: linear-gradient(180deg, #000, transparent 75%);
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 75%);
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .35; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
.sky-deco span { color: #fff; font-size: 14px; opacity: .9; text-shadow: 0 0 10px rgba(255, 150, 220, .9), 0 0 2px #fff; animation: twinkle 4s ease-in-out infinite; }
.sky-deco span:nth-child(odd) { animation-delay: -2s; font-size: 10px; }
@keyframes twinkle { 0%, 100% { opacity: .2; transform: scale(.7) rotate(0); } 50% { opacity: .95; transform: scale(1.1) rotate(25deg); } }
::selection { background: #ff9bd3; color: #fff; }
.no-scroll { overflow: hidden; }
[class^="ph-"], [class*=" ph-"] { line-height: 1; vertical-align: -0.12em; }

/* cursor y scrollbar */
html { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 12 12' shape-rendering='crispEdges'%3E%3Cpath fill='%234b2a6e' d='M0 0h3v1h1v1h1v1h1v1h1v1h1v1h1v1H7v1h1v1H5V8H4v1H3v1H2V9H1V2H0z'/%3E%3Cpath fill='%23ff8fcf' d='M1 1h1v1h1v1h1v1h1v1h1v1H4v1H3v1H2V7H1z'/%3E%3C/svg%3E") 2 2, auto; }
* { scrollbar-width: thin; scrollbar-color: #ff9bd3 transparent; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { border-radius: 999px; border: 3px solid transparent; background: linear-gradient(180deg, #ffb3dd, #ff6fbf) padding-box; }

/* ---------- logo y marquesina ---------- */
.topbar { padding: 18px 16px 8px; gap: 22px; }
.logo { gap: 12px; flex-wrap: nowrap; }
.logo-icon { width: 48px; filter: drop-shadow(0 6px 8px rgba(255, 95, 174, .35)); }
.logo-icon .px { width: 48px; }
.logo-words { display: flex; flex-direction: column; gap: 3px; }
.logo-text {
  font-family: var(--f-display); font-weight: 900; font-size: 30px; letter-spacing: -.02em; line-height: 1;
  background: linear-gradient(180deg, #ffffff 0%, #ffe3f3 30%, #ff7cc6 50%, #ff4fa8 56%, #ffc7e6 82%, #ffffff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: 1px rgba(200, 40, 130, .25);
  filter: drop-shadow(0 1px 0 #fff) drop-shadow(0 4px 6px rgba(255, 79, 168, .35));
}
.logo-ext { font-size: 18px; font-weight: 700; }
.logo-tag { padding: 0; margin: 0; flex-basis: auto; font-family: var(--f-pixel); font-size: 9px; letter-spacing: .14em; color: var(--ink-soft); text-transform: uppercase; }
.marquee {
  border: 1px solid var(--glass-bd); border-radius: 999px; padding: 7px 0;
  background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow-1), 0 0 0 1px var(--line);
  font-family: var(--f-pixel); font-size: 10px; letter-spacing: .1em; color: #e8459c;
}
[data-skin="night"] .marquee { background: var(--glass); color: #ff9bd3; }

/* ---------- superficies de cristal ---------- */
.glass, .panel {
  position: relative;
  background: var(--glass);
  border: 1px solid var(--glass-bd);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-2), 0 0 0 1px var(--line);
  backdrop-filter: blur(18px) saturate(1.35);
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
}
.glass::before, .panel::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(160deg, rgba(255,255,255,.65) 0%, rgba(255,255,255,0) 35%);
}
[data-skin="night"] .glass::before, [data-skin="night"] .panel::before { background: linear-gradient(160deg, rgba(255,255,255,.08) 0%, transparent 35%); }
.glass > *, .panel > * { position: relative; }

/* ventanas (modales, buzón…): cristal con caramelos tipo Aqua */
.win {
  background: var(--glass-strong);
  border: 1px solid var(--glass-bd);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-3), 0 0 0 1px var(--line);
  backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4);
}
.win-title {
  min-height: 44px; padding: 6px 8px 6px 70px; gap: 8px;
  border-radius: calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,239,255,.92));
  border-bottom: 1px solid var(--line);
  color: var(--ink); text-shadow: none;
  font-family: var(--f-body); font-weight: 800; font-size: 13px; letter-spacing: .01em;
  overflow: visible;
}
[data-skin="night"] .win-title { background: linear-gradient(180deg, #3a2c66, #2d2152); }
.win-title::before {
  content: ""; position: absolute; left: 16px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0 18%, #ff6fa0 45%, #e8457e);
  box-shadow: 18px 0 0 0 #ffc75a, 36px 0 0 0 #6fd8a6;
}
.win-title::after { display: none; }
.win-title > span:first-child:not(.t) { display: none; }
.win-ctrl {
  width: 30px; height: 30px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--card); color: var(--ink-soft); font-family: var(--f-body); font-size: 16px; text-shadow: none;
  box-shadow: var(--shadow-1);
}
.win-ctrl.close { background: var(--card); color: var(--ink-soft); }
.win-ctrl:hover, .win-ctrl.close:hover { background: var(--gel-pink); color: #fff; border-color: transparent; transform: none; }
.win-body { padding: 20px; }

/* ---------- botones ---------- */
.btn {
  border: 1px solid var(--line-strong); border-radius: 999px;
  background: linear-gradient(180deg, #ffffff 0%, #fbf6ff 50%, #f1e8ff 51%, #f8f3ff 100%);
  color: var(--ink); font-family: var(--f-body); font-weight: 800; letter-spacing: .01em;
  box-shadow: inset 0 1px 0 #fff, 0 6px 14px -8px rgba(120, 60, 170, .5), 0 1px 0 rgba(120, 60, 170, .1);
  min-height: 40px; padding: 8px 18px; gap: 7px; overflow: hidden; isolation: isolate;
}
.btn i { font-size: 1.15em; }
.btn::before { left: 12%; right: 12%; top: 2px; height: 42%; background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,0)); }
.btn::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -70%; width: 45%; z-index: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.7), transparent); transform: skewX(-20deg); transition: left .6s ease;
}
.btn:hover::after { left: 140%; }
.btn:hover { transform: translateY(-1px); filter: none; }
.btn:active { transform: translateY(1px); }
.btn-pink { background: var(--gel-pink); border-color: rgba(220, 50, 140, .55); color: #fff; text-shadow: 0 1px 0 rgba(160, 20, 95, .35); box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 10px 22px -10px rgba(255, 60, 160, .9), 0 2px 0 rgba(200, 40, 130, .5); }
[data-skin="aqua"] .btn-pink { border-color: rgba(30, 110, 220, .5); text-shadow: 0 1px 0 rgba(10, 60, 140, .35); box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 10px 22px -10px rgba(40, 130, 255, .9), 0 2px 0 rgba(30, 100, 210, .5); }
.btn-sky { background: linear-gradient(180deg, #d8efff 0%, #7cc4ff 48%, #4aa9f5 52%, #8fd0ff 100%); border-color: rgba(40, 120, 210, .5); color: #fff; text-shadow: 0 1px 0 rgba(20, 70, 140, .35); }
.btn-mint { background: linear-gradient(180deg, #dbfff1 0%, #8ff0cc 48%, #4fd8a8 52%, #9cf2d3 100%); border-color: rgba(40, 160, 120, .5); color: #0d5c43; }
.btn-danger { background: linear-gradient(180deg, #ffd3dc 0%, #ff8aa3 48%, #ff5a7e 52%, #ff92a8 100%); border-color: rgba(210, 40, 80, .5); color: #fff; }
[data-skin="night"] .btn:not([class*="btn-"]) { background: linear-gradient(180deg, #4a3a80, #3a2b68 50%, #31245c 51%, #3b2d6a); color: #f6eaff; border-color: rgba(255,255,255,.15); }
.btn-big { min-height: 58px; padding: 14px 30px; font-family: var(--f-display); font-weight: 800; font-size: 17px; letter-spacing: .04em; outline: none; }
.btn-new { animation: none; }
.btn-block { width: 100%; margin-top: 12px; }
.btn-ic { width: 40px; padding: 0; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }
.icon-btn { width: 34px; height: 34px; border-radius: 12px; font-size: 18px; color: var(--ink-soft); border: 1px solid transparent; }
.icon-btn:hover { background: var(--pink-l); border-color: transparent; color: var(--pink); transform: none; }
.link-btn { display: inline-flex; align-items: center; gap: 5px; text-decoration: none; font-size: 13px; color: var(--pink); }
.link-btn:hover { text-decoration: underline; }
.chip-btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 6px 13px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink); font-weight: 800; font-size: 13px;
  box-shadow: var(--shadow-1); transition: transform .12s, border-color .15s;
}
.chip-btn i { font-size: 16px; color: var(--pink); }
.chip-btn:hover { transform: translateY(-1px); border-color: var(--pink-2); }
.chip-btn.hot { background: linear-gradient(180deg, #fff, var(--pink-l)); border-color: var(--pink-2); }
.chip-btn b { background: var(--pink); color: #fff; border-radius: 999px; padding: 0 7px; font-size: 11px; }

/* ---------- gominolas (iconos con brillo) ---------- */
.jelly {
  --jc: var(--pink);
  flex: none; width: 42px; height: 42px; border-radius: 14px; display: inline-grid; place-items: center;
  color: #fff; font-size: 22px; position: relative; overflow: hidden;
  background:
    radial-gradient(120% 80% at 30% 0%, rgba(255,255,255,.85) 0 22%, rgba(255,255,255,0) 46%),
    linear-gradient(165deg, color-mix(in srgb, var(--jc) 45%, #fff) 0%, var(--jc) 55%, color-mix(in srgb, var(--jc) 85%, #000) 100%);
  box-shadow: inset 0 -3px 6px rgba(0,0,0,.12), inset 0 1px 1px rgba(255,255,255,.8), 0 6px 14px -6px color-mix(in srgb, var(--jc) 70%, transparent);
}
.jelly i { position: relative; filter: drop-shadow(0 1px 0 rgba(0,0,0,.18)); }
.jelly.emoji { font-size: 20px; }
.jelly.xs { width: 26px; height: 26px; border-radius: 9px; font-size: 15px; }
.jelly.xs.emoji { font-size: 14px; }
.jelly.sm { width: 34px; height: 34px; border-radius: 11px; font-size: 18px; }
.jelly.lg { width: 76px; height: 76px; border-radius: 24px; font-size: 42px; }
.jelly.lg.emoji { font-size: 38px; }
.jelly.plus { --jc: #c9b6f2; }

/* ---------- inicio ---------- */
.kicker { margin: 0 0 10px; display: flex; align-items: center; gap: 6px; font-family: var(--f-pixel); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.kicker i { color: var(--pink); font-size: 14px; }
.hero-home { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 34px 36px; margin-bottom: 30px; overflow: hidden; }
.chrome-title {
  margin: 0 0 12px; font-family: var(--f-display); font-weight: 900; font-size: clamp(34px, 5.4vw, 62px); line-height: .98; letter-spacing: -.03em;
  background: linear-gradient(180deg, #ffffff 0%, #ffe0f1 22%, #ff8acb 46%, #ff3d9d 54%, #ff9ad1 74%, #fff3fa 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: 1.5px rgba(210, 40, 130, .28);
  filter: drop-shadow(0 2px 0 #fff) drop-shadow(0 10px 14px rgba(255, 70, 160, .28));
}
[data-skin="aqua"] .chrome-title { background-image: linear-gradient(180deg, #fff 0%, #dff1ff 22%, #7cc4ff 46%, #1f86f0 54%, #8fd0ff 74%, #f3faff 100%); -webkit-text-stroke-color: rgba(30, 100, 210, .28); filter: drop-shadow(0 2px 0 #fff) drop-shadow(0 10px 14px rgba(40, 130, 255, .28)); }
[data-skin="lilac"] .chrome-title { background-image: linear-gradient(180deg, #fff 0%, #efe2ff 22%, #c49bff 46%, #8a4ff0 54%, #cfaeff 74%, #faf5ff 100%); }
[data-skin="night"] .chrome-title { -webkit-text-stroke-color: rgba(255,255,255,.2); filter: drop-shadow(0 10px 18px rgba(255, 70, 160, .4)); }
.h-heart { display: inline-block; -webkit-text-stroke: 0; background: none; color: #ff5fae; -webkit-text-fill-color: #ff5fae; animation: beat 1.6s ease-in-out infinite; }
@keyframes beat { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.18); } 24% { transform: scale(1); } 36% { transform: scale(1.12); } }
.hero-home .sub { margin: 0 0 22px; font-size: 16px; font-weight: 500; color: var(--ink-soft); max-width: 46ch; }
.hero-home .sub b { color: var(--ink); }
.hh-cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.next-pill {
  display: inline-flex; align-items: center; gap: 12px; padding: 8px 16px 8px 8px; border-radius: 999px; text-decoration: none;
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-1); transition: transform .15s;
}
.next-pill:hover { transform: translateY(-2px); }
.next-pill > i { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; color: #fff; background: var(--gel-pink); }
.next-pill span { display: flex; flex-direction: column; line-height: 1.15; }
.next-pill small { font-family: var(--f-pixel); font-size: 9px; letter-spacing: .1em; color: var(--ink-faint); text-transform: uppercase; }
.next-pill b { font-size: 15px; }
.next-pill em { font-style: normal; font-size: 12px; font-weight: 800; color: var(--pink); background: var(--pink-l); padding: 3px 10px; border-radius: 999px; }
.hh-deco { position: absolute; inset: 0; pointer-events: none; }
.hh-deco span { position: absolute; color: var(--pink-2); font-size: 18px; animation: twinkle 3.5s ease-in-out infinite; }
.hh-deco .d1 { left: 46%; top: 16%; }
.hh-deco .d2 { left: 54%; bottom: 14%; color: var(--sky); animation-delay: -1.5s; }
.hh-deco .d3 { right: 32%; top: 10%; color: var(--lila); animation-delay: -2.5s; }
.hh-deco .disc {
  right: -70px; bottom: -80px; width: 230px; height: 230px; border-radius: 50%; opacity: .55;
  background:
    radial-gradient(circle, rgba(255,255,255,.9) 0 9%, rgba(210, 210, 230, .9) 9.5% 11%, transparent 11.5%),
    conic-gradient(from 20deg, #ffd6f0, #c9f0ff, #e6dcff, #fff6c8, #d4fbec, #ffd6f0, #c9f0ff, #e6dcff, #ffd6f0);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.8);
  animation: spin 18s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.hh-right { position: relative; z-index: 1; }

.section-head { margin: 0 0 16px; }
.h-title { margin: 0; display: flex; align-items: center; gap: 10px; font-family: var(--f-display); font-weight: 800; font-size: 22px; letter-spacing: -.02em; color: var(--ink); text-shadow: none; }
.h-title i { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: #fff; font-size: 20px; background: var(--gel-pink); box-shadow: 0 6px 14px -6px rgba(255, 60, 160, .7); }
.h-sub { margin: 0 0 6px; display: flex; align-items: center; gap: 8px; font-family: var(--f-display); font-weight: 700; font-size: 17px; }
.h-sub i { color: var(--pink); }
.seg { background: var(--glass); border: 1px solid var(--glass-bd); box-shadow: var(--shadow-1), 0 0 0 1px var(--line); padding: 4px; backdrop-filter: blur(10px); }
.seg button { padding: 7px 14px; font-size: 13px; }
.seg button.on { background: var(--gel-pink); box-shadow: 0 4px 10px -4px rgba(255, 60, 160, .7); }

/* ---------- tarjeta de embarque ---------- */
.passes { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 22px; }
.pass {
  --tc: #ff8fcf; --tc-l: #ffd0ec; --tc-d: #e0559f;
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 136px; overflow: hidden; cursor: pointer;
  background: var(--card); border-radius: var(--r-lg);
  box-shadow: var(--shadow-2), 0 0 0 1px var(--line);
  transition: transform .2s cubic-bezier(.3, 1.4, .5, 1), box-shadow .2s;
  animation: pass-in .5s cubic-bezier(.3, 1.3, .5, 1) backwards; animation-delay: calc(var(--i, 0) * 60ms);
}
@keyframes pass-in { from { opacity: 0; transform: translateY(16px) rotate(-1deg); } }
.pass:hover { transform: translateY(-4px) rotate(-.35deg); box-shadow: var(--shadow-3), 0 0 0 1px var(--line); }
.pass:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; }
/* agujeros de troquel */
.pass::before, .pass::after {
  content: ""; position: absolute; z-index: 3; right: 125px; width: 22px; height: 22px; border-radius: 50%;
  background: #f6e8f8; box-shadow: inset 0 2px 4px rgba(110, 60, 160, .2);
}
.pass::before { top: -11px; }
.pass::after { bottom: -11px; }
[data-skin="aqua"] .pass::before, [data-skin="aqua"] .pass::after { background: #e9f3ff; }
[data-skin="lilac"] .pass::before, [data-skin="lilac"] .pass::after { background: #f2e9ff; }
[data-skin="night"] .pass::before, [data-skin="night"] .pass::after { background: #18112f; }
.pass-main { position: relative; padding: 0 20px 18px; display: flex; flex-direction: column; gap: 12px; min-width: 0; background: linear-gradient(165deg, var(--card) 55%, color-mix(in srgb, var(--tc-l) 55%, var(--card))); }
.pass-top {
  display: flex; align-items: center; gap: 8px; margin: 0 -20px; padding: 10px 12px 10px 20px;
  background: linear-gradient(90deg, var(--tc), color-mix(in srgb, var(--tc) 55%, #fff)); color: #fff;
}
.pass-air { font-family: var(--f-pixel); font-size: 9px; letter-spacing: .14em; display: inline-flex; gap: 5px; align-items: center; text-shadow: 0 1px 0 rgba(0,0,0,.15); }
.pass-air i { font-size: 14px; }
.pass-kind { margin-left: auto; font-family: var(--f-pixel); font-size: 9px; letter-spacing: .12em; padding: 3px 8px; border-radius: 999px; background: rgba(255,255,255,.3); border: 1px solid rgba(255,255,255,.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pass-tools { display: flex; gap: 2px; }
.pass-menu { width: 30px; height: 30px; border-radius: 10px; border: 0; background: rgba(255,255,255,.25); color: #fff; font-size: 18px; display: grid; place-items: center; padding: 0; }
.pass-menu:hover { background: rgba(255,255,255,.5); }
.pass-route { display: grid; grid-template-columns: auto minmax(30px, 1fr); align-items: center; gap: 4px 14px; }
.pass-code small, .pass-grid small { display: block; font-family: var(--f-pixel); font-size: 8px; letter-spacing: .14em; color: var(--ink-faint); }
.pass-code b { display: block; font-family: var(--f-display); font-weight: 900; font-size: 40px; line-height: .95; letter-spacing: -.02em; color: var(--tc-d); }
.pass-line { display: flex; align-items: center; gap: 6px; color: var(--tc-d); font-size: 20px; }
.pass-line span { flex: 1; border-top: 2px dashed color-mix(in srgb, var(--tc-d) 55%, transparent); }
.pass-line i { transform: rotate(0deg); }
.pass:hover .pass-line i { animation: fly 1s ease-in-out; }
@keyframes fly { 50% { transform: translateX(8px) translateY(-3px) rotate(-8deg); } }
.pass-name { grid-column: 1 / -1; min-width: 0; }
.pass-name h3, .pass-name h1 { margin: 0; font-family: var(--f-display); font-weight: 700; font-size: 17px; letter-spacing: -.01em; line-height: 1.2; word-break: break-word; color: var(--ink); }
.pass-name p { margin: 3px 0 0; font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.pass-name p i { color: var(--tc-d); }
.pass-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; padding-top: 12px; border-top: 1px dashed var(--line-strong); }
.pass-grid b { display: flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 800; margin-top: 2px; color: var(--ink); }
.pass-grid b i { color: var(--tc-d); font-size: 16px; }
.pass-grid b.live { color: #ff3d9d; }
.pass-grid b.live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #ff3d9d; box-shadow: 0 0 0 0 rgba(255, 61, 157, .6); animation: ping 1.4s ease-out infinite; }
@keyframes ping { to { box-shadow: 0 0 0 8px rgba(255, 61, 157, 0); } }
.pass-stub {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 18px 14px 14px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--tc-l) 70%, var(--card)), var(--card));
  border-left: 2px dashed color-mix(in srgb, var(--tc) 60%, transparent);
}
.stub-art { position: relative; width: 70px; }
.stub-art .px { width: 70px; height: auto; filter: drop-shadow(0 6px 6px rgba(110, 60, 160, .25)); }
.stub-art .card-sticker { right: -12px; bottom: -8px; font-size: 24px; }
.stub-pct { text-align: center; line-height: 1; }
.stub-pct b { font-family: var(--f-display); font-weight: 900; font-size: 28px; color: var(--ink); letter-spacing: -.03em; }
.stub-pct b i { font-style: normal; font-size: 15px; color: var(--pink); }
.stub-pct small { display: block; margin-top: 3px; font-family: var(--f-pixel); font-size: 8px; letter-spacing: .1em; color: var(--ink-faint); text-transform: uppercase; }
.pass-stub .prog { width: 100%; }
.barcode { width: 100%; height: 30px; fill: var(--ink); opacity: .55; }
.pass.is-past { filter: saturate(.55); opacity: .82; }
.pass.is-full .stub-pct b { background: linear-gradient(90deg, #ff6fbf, #a98bff, #5fb8ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pass .sample-ribbon { position: absolute; top: 46px; right: 14px; transform: rotate(4deg); z-index: 2; }
.place-patch { z-index: 2; }

/* tarjeta grande del viaje */
.crumbs { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 13px; font-weight: 700; color: var(--ink-faint); }
.crumb-back { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; text-decoration: none; color: var(--ink); background: var(--glass); border: 1px solid var(--glass-bd); box-shadow: var(--shadow-1), 0 0 0 1px var(--line); backdrop-filter: blur(10px); }
.crumb-back:hover { color: var(--pink); }
.crumbs b { color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pass-hero { grid-template-columns: minmax(0, 1fr) 260px; cursor: default; margin-bottom: 22px; animation: none; }
.pass-hero:hover { transform: none; box-shadow: var(--shadow-2), 0 0 0 1px var(--line); }
.pass-hero::before, .pass-hero::after { right: 249px; }
.pass-hero .pass-main { padding: 0 26px 22px; gap: 16px; }
.pass-hero .pass-top { margin: 0 -26px; padding-left: 26px; }
.pass-hero .pass-code b { font-size: 64px; }
.pass-hero .pass-name h1 { font-size: clamp(22px, 3vw, 32px); font-weight: 800; letter-spacing: -.025em; }
.pass-hero .pass-name p { font-size: 15px; }
.pass-hero .pass-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pass-hero .pass-grid b { font-size: 14px; }
.pass-tips { display: flex; flex-wrap: wrap; gap: 8px; }
.tip-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 14px; font-size: 12.5px; font-weight: 500; color: var(--ink-soft); background: color-mix(in srgb, var(--tc-l) 50%, var(--card)); border: 1px solid color-mix(in srgb, var(--tc) 30%, transparent); }
.tip-chip i { color: var(--tc-d); font-size: 15px; }
.tip-chip b { color: var(--ink); }
.tip-chip.demo { font-family: var(--f-pixel); font-size: 10px; background: var(--lemon); color: #6b5300; border-color: #e6c548; }
.pass-hero .pass-stub { gap: 12px; padding: 22px 18px 16px; }
.pass-hero .stub-art, .pass-hero .stub-art .px { width: 92px; }

/* clima dentro del billete */
.weather { width: 100%; border: 1px solid var(--line); border-radius: 18px; padding: 10px 12px; background: var(--glass-strong); box-shadow: var(--shadow-1); }
.weather-head { margin-bottom: 4px; font-family: var(--f-pixel); font-size: 9px; letter-spacing: .08em; }
.weather-main { gap: 10px; }
.weather-main .big { font-size: 38px; color: #ffb21a; }
.weather-main .big .ph-cloud-rain, .weather-main .big .ph-cloud, .weather-main .big .ph-cloud-fog, .weather-main .big .ph-cloud-snow, .weather-main .big .ph-snowflake { color: #5fa8f0; }
.weather-main b { display: block; font-family: var(--f-display); font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.weather-main small { display: block; font-size: 11.5px; color: var(--ink-faint); font-weight: 700; }
.weather-days { gap: 3px; margin-top: 8px; }
.weather-days div { min-width: 0; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px 2px; border-radius: 10px; background: color-mix(in srgb, var(--sky-l) 70%, transparent); font-size: 10px; }
.weather-days em { font-style: normal; color: var(--ink-faint); font-weight: 800; text-transform: capitalize; }
.weather-days i { font-size: 16px; color: #ffa81a; }
.weather-days b { font-size: 11px; }
.w-note { display: block; margin-top: 6px; font-size: 10.5px; line-height: 1.3; color: var(--ink-faint); }
.spin { animation: spin 1s linear infinite; display: inline-block; }

/* ---------- estado de la maleta ---------- */
.status-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px 26px; align-items: center; padding: 24px 28px; margin-bottom: 26px; }
.status-ring { position: relative; width: 132px; height: 132px; }
.ring { display: block; filter: drop-shadow(0 8px 12px rgba(255, 79, 168, .25)); }
.ring-val { transition: stroke-dashoffset .8s cubic-bezier(.3, 1.2, .5, 1); }
.ring-label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.ring-label b { font-family: var(--f-display); font-weight: 900; font-size: 34px; letter-spacing: -.04em; color: var(--ink); }
.ring-label b i { font-style: normal; font-size: 16px; color: var(--pink); }
.ring-label small { margin-top: 4px; font-family: var(--f-pixel); font-size: 9px; letter-spacing: .16em; color: var(--ink-faint); }
.status-info .kicker { margin-bottom: 6px; }
.status-msg { margin: 0 0 14px; font-family: var(--f-display); font-weight: 700; font-size: 18px; letter-spacing: -.015em; line-height: 1.3; }
.counts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; }
.count { min-width: 0; padding: 10px 6px; border-radius: 16px; border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow-1); }
.count b { font-family: var(--f-display); font-weight: 800; font-size: 22px; letter-spacing: -.03em; }
.count small { font-size: 11px; text-align: center; }
.count.warn { border-color: rgba(255, 79, 123, .45); background: linear-gradient(180deg, var(--card), #fff1f4); }
[data-skin="night"] .count.warn { background: var(--card); }
.count.okk b { color: #2fa57d; }
.status-mini { display: flex; }
.status-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-top: 18px; border-top: 1px dashed var(--line-strong); }
.btn-pack { min-height: 52px; padding: 12px 26px; font-size: 16px; font-family: var(--f-display); font-weight: 700; letter-spacing: 0; }
.btn-pack i { font-size: 22px; }
.tool-row { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.tool {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 12px; border: 1px solid transparent;
  background: transparent; color: var(--ink-soft); font-weight: 800; font-size: 13px; transition: background .15s, color .15s;
}
.tool i { font-size: 18px; color: var(--lila); }
.tool:hover { background: var(--card); border-color: var(--line); color: var(--ink); }
.tool.on { background: var(--card); border-color: var(--pink-2); color: var(--pink); }
.tool.on i { color: var(--pink); }
.tool.danger { background: #ffe3ea; border-color: #ff8aa3; color: #d22c58; }
.tool.danger i { color: #d22c58; }

/* ---------- pestañas ---------- */
.tabs {
  display: flex; gap: 4px; padding: 5px; margin: 0 0 14px; overflow-x: auto; transform: none;
  background: var(--glass); border: 1px solid var(--glass-bd); border-radius: 20px; box-shadow: var(--shadow-1), 0 0 0 1px var(--line);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.tab {
  display: inline-flex; align-items: center; gap: 7px; flex: 1 0 auto; justify-content: center;
  padding: 10px 14px; border: 0; border-radius: 15px; transform: none; background: transparent; box-shadow: none;
  color: var(--ink-soft); font-weight: 800; font-size: 13.5px; white-space: nowrap;
}
[data-skin="night"] .tab { background: transparent; }
.tab i { font-size: 18px; }
.tab:hover { transform: none; background: rgba(255,255,255,.6); color: var(--ink); }
[data-skin="night"] .tab:hover { background: rgba(255,255,255,.06); }
.tab.on { background: var(--card); color: var(--pink); padding-bottom: 10px; box-shadow: 0 6px 14px -8px rgba(120, 60, 170, .45), 0 0 0 1px var(--line); }
.tab .n { font-family: var(--f-body); font-weight: 800; font-size: 11px; background: var(--gel-pink); padding: 1px 7px; margin: 0; }
.tab-panel { padding: 22px; border-radius: var(--r-xl); }

/* ---------- checklist ---------- */
.list-layout { grid-template-columns: 230px minmax(0, 1fr); gap: 22px; }
.cat-nav { gap: 3px; top: 14px; }
.cat-nav-title { font-family: var(--f-pixel); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; padding: 0 10px 8px; }
.cat-nav button { grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; padding: 7px 10px; border-radius: 14px; border: 1px solid transparent; font-size: 13.5px; }
.cat-nav button:hover { background: var(--card); border-color: var(--line); }
.cat-nav button.done .nm { text-decoration: none; color: var(--ink-faint); }
.cat-nav .ct { font-family: var(--f-body); font-weight: 800; font-size: 11px; }
.cat-nav button.done .ct { color: #2fa57d; font-size: 15px; }
.cat-nav button.add { color: var(--ink-soft); }
.toolbar { gap: 8px; margin-bottom: 14px; }
.search input { border: 1px solid var(--line-strong); min-height: 42px; background: var(--card); box-shadow: var(--shadow-1); padding-left: 38px; }
.search input:focus { border-color: var(--pink); box-shadow: 0 0 0 4px rgba(255, 111, 191, .15); }
.search::before { content: "\e30c"; font-family: "Phosphor-Duotone"; content: ""; }
.search { position: relative; }
.search::after { content: ""; position: absolute; left: 14px; top: 50%; width: 13px; height: 13px; margin-top: -8px; border: 2.5px solid var(--pink); border-radius: 50%; pointer-events: none; }
.search input::-webkit-search-cancel-button { filter: hue-rotate(280deg); }

.cats { gap: 16px; }
.cat {
  position: relative; background: var(--card); border-radius: var(--r-lg); scroll-margin-top: 80px;
  box-shadow: var(--shadow-1), 0 0 0 1px var(--line), 0 14px 28px -22px rgba(110, 60, 160, .45);
  transition: box-shadow .3s;
}
.cat-head { display: flex; align-items: center; gap: 12px; padding: 14px 14px 12px 16px; }
.cat-ttl { flex: 1; min-width: 0; }
.cat-ttl h3 { margin: 0; font-family: var(--f-display); font-weight: 700; font-size: 15px; letter-spacing: -.01em; line-height: 1.2; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-sub { font-size: 12px; font-weight: 700; color: var(--ink-faint); }
.cat .cat-count { font-family: var(--f-body); font-weight: 800; font-size: 12px; color: var(--ink-soft); background: var(--tab-bg); border: 0; padding: 4px 10px; border-radius: 999px; }
.cat-acts { display: flex; gap: 2px; }
.caret i { transition: transform .2s; }
.caret.closed i { transform: rotate(-90deg); }
.cat-bar { height: 4px; margin: 0 16px; border-radius: 999px; background: var(--ring-track); overflow: hidden; }
.cat-bar i { border-radius: 999px; background: linear-gradient(90deg, var(--pink), var(--lila), var(--sky)); }
.complete-badge { display: inline-flex; align-items: center; gap: 4px; font-family: var(--f-body); font-weight: 800; font-size: 12px; padding: 4px 10px; border-radius: 999px; background: #dcfbef; color: #1f8a68; animation: none; }
.cat.is-complete { background: var(--card); box-shadow: var(--shadow-1), 0 0 0 2px #8ff0cc, 0 14px 28px -20px rgba(47, 165, 125, .55); border: 0; }
.cat.is-complete::before { content: none; }
.cat.is-complete .cat-bar i { background: linear-gradient(90deg, #7fe3c0, #3fc79b); }
.cat.collapsed .cat-bar { margin-bottom: 14px; }
.items { padding: 6px 8px 4px; }
.item { grid-template-columns: 22px 32px minmax(0, 1fr) auto 34px 34px; gap: 8px; padding: 9px 8px; border-radius: 14px; border: 0; }
.item + .item { border-top: 0; border-radius: 14px; box-shadow: 0 -1px 0 var(--line); }
.item:hover { background: color-mix(in srgb, var(--pink-l) 55%, transparent); }
.item.is-packed { background: transparent; }
.item.is-packed .item-name .label { color: var(--ink-faint); opacity: 1; text-decoration-thickness: 2px; text-decoration-color: color-mix(in srgb, var(--pink) 70%, transparent); }
.drag { color: var(--ink-faint); font-size: 16px; letter-spacing: 0; opacity: .5; }
.item:hover .drag { opacity: 1; }
.item-name { font-size: 15px; font-weight: 700; }
.stamp { font-size: 8px; padding: 1px 5px; border-radius: 6px; }
.shop-tag { display: inline-flex; gap: 3px; align-items: center; color: var(--sky); }
.cat-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ink-faint); }
.qty { border: 1px solid var(--line); background: var(--tab-bg); }
.qty button { color: var(--ink-soft); width: 26px; }
.qty button:hover { background: var(--card); color: var(--pink); }
.qty input { font-family: var(--f-body); }
.star-btn { width: 34px; height: 34px; border-radius: 12px; font-size: 19px; color: color-mix(in srgb, var(--ink-faint) 70%, transparent); display: grid; place-items: center; }
.star-btn:hover { background: #fff6d6; transform: none; color: #ffb21a; }
.star-btn.on { color: #ffb21a; text-shadow: none; filter: drop-shadow(0 2px 4px rgba(255, 170, 20, .5)); }
.more-btn { width: 34px; height: 34px; border-radius: 12px; font-size: 20px; display: grid; place-items: center; }
.add-item { padding: 6px 14px 16px 52px; gap: 8px; }
.add-item input[name="name"] { min-height: 40px; border: 1.5px dashed var(--line-strong); background: transparent; font-weight: 600; }
.add-item input[name="name"]:focus { border-style: solid; border-color: var(--pink); background: var(--card); box-shadow: 0 0 0 4px rgba(255, 111, 191, .12); }
.add-item input[name="qty"] { min-height: 40px; border: 1px solid var(--line); background: var(--tab-bg); }
.cat-empty { padding: 10px 16px 2px 58px; }

/* casillas tipo gominola redonda */
.chk-box {
  width: 28px; height: 28px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--lila) 55%, #fff);
  background: radial-gradient(circle at 35% 30%, #fff, #f6f0ff); box-shadow: inset 0 2px 3px rgba(120, 80, 200, .15);
  font-size: 14px;
}
[data-skin="night"] .chk-box { background: radial-gradient(circle at 35% 30%, #4a3a80, #2a1d55); }
.chk:hover .chk-box { border-color: var(--pink-2); }
.chk input:checked + .chk-box {
  background: radial-gradient(circle at 35% 25%, rgba(255,255,255,.9) 0 12%, transparent 30%), var(--gel-pink);
  border-color: transparent; transform: scale(1.06); animation: heart-pop .35s cubic-bezier(.3, 1.9, .5, 1);
  box-shadow: 0 4px 10px -3px rgba(255, 60, 160, .7);
}
@keyframes heart-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.3); } 100% { transform: scale(1.06); } }
.chk.sm .chk-box { width: 22px; height: 22px; font-size: 11px; }

/* barra de progreso */
.prog { height: 22px; border: 0; background: var(--ring-track); box-shadow: inset 0 2px 4px rgba(110, 60, 160, .15); }
.prog > i { background: repeating-linear-gradient(-45deg, rgba(255,255,255,.25) 0 8px, rgba(255,255,255,0) 8px 16px), linear-gradient(90deg, var(--pink), var(--lila) 55%, var(--sky)); background-size: 22px 22px, 100% 100%; }
.prog > b { font-family: var(--f-body); font-weight: 800; font-size: 11.5px; letter-spacing: .02em; color: var(--ink); text-shadow: 0 0 4px rgba(255,255,255,.95), 0 0 2px #fff; }
.prog.sm { height: 8px; border: 0; }
@keyframes stripes { to { background-position: 22px 0, 0 0; } }

/* imprescindibles, compras, notas, vuelta */
.panel-intro { color: var(--ink-soft); font-weight: 500; line-height: 1.5; }
.legend { display: block; margin: 16px 0 8px; font-family: var(--f-pixel); font-size: 9px; letter-spacing: .14em; color: var(--ink-faint); }
.suggest-chips button { border: 1.5px dashed var(--line-strong); padding: 6px 13px; }
.suggest-chips button:hover { border-color: var(--pink); background: var(--pink-l); }
.ess-group h4 { display: flex; align-items: center; gap: 8px; margin: 18px 0 6px; font-family: var(--f-display); font-weight: 700; font-size: 14px; color: var(--ink); }
.shop-item { grid-template-columns: 32px minmax(0, 1fr) auto auto 34px; }
.notes-area { font-family: var(--f-hand); font-size: 19px; line-height: 32px; border: 1px solid var(--line-strong); border-radius: 20px; box-shadow: var(--shadow-1); background: repeating-linear-gradient(180deg, transparent 0 31px, rgba(95, 184, 255, .3) 31px 32px) 0 14px / 100% 32px, linear-gradient(180deg, #fffdf2, #fff8dc); }
.sweep label { border: 1px solid var(--line); border-radius: 16px; background: var(--card); box-shadow: var(--shadow-1); }
.sweep label.on { border-color: #8ff0cc; background: #effdf7; }
[data-skin="night"] .sweep label.on { background: #1d4a40; }

/* pánico */
.panic-win { border-radius: var(--r-xl); overflow: hidden; }
.panic-win .win-title { background: linear-gradient(180deg, #ffe4ea, #ffc9d4); color: #b0163f; animation: none; }
.panic-head .warn-ic { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; font-size: 36px; color: #fff; background: linear-gradient(180deg, #ff9db1, #ff4f7b); box-shadow: 0 10px 20px -8px rgba(255, 60, 100, .8); }
.panic-head h2 { font-family: var(--f-display); font-weight: 800; letter-spacing: -.02em; }

/* ---------- avisos ---------- */
.alerts-intro { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.alerts-intro .panel-intro { margin: 0; max-width: 64ch; }
.bell-on { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 800; color: #2fa57d; background: #dcfbef; padding: 5px 10px; border-radius: 999px; }
.preset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.preset {
  display: flex; align-items: center; gap: 10px; text-align: left; padding: 10px 12px; border-radius: 16px;
  border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow-1); color: var(--ink); transition: transform .12s, border-color .15s;
}
.preset:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--pink-2); }
.preset:disabled { cursor: default; opacity: .55; }
.preset.on { opacity: 1; border-color: #8ff0cc; background: #f3fdf9; }
[data-skin="night"] .preset.on { background: #1d4a40; }
.preset b { display: block; font-size: 13.5px; line-height: 1.25; }
.preset small { font-size: 11.5px; font-weight: 700; color: var(--ink-faint); }

/* recordatorios (inicio y viaje) */
.rem-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.rem { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto auto; gap: 6px; align-items: center; padding: 5px 0; min-height: 34px; }
.rem .txt { font-family: var(--f-hand); font-size: 18px; line-height: 1.15; word-break: break-word; }
.rem.done .txt { text-decoration: line-through; text-decoration-color: var(--pink); opacity: .5; }
.rem-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rem-meta { display: flex; flex-wrap: wrap; gap: 4px; }
.due, .rem-trip { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 800; padding: 1px 8px; border-radius: 999px; background: rgba(255,255,255,.75); border: 1px solid var(--line); color: var(--ink-soft); text-decoration: none; }
.rem-trip:hover { color: var(--pink); }
.rem.soon .due { background: #fff1c2; border-color: #f0cf5a; color: #7a5a00; }
.rem.late .due { background: #ffe0e7; border-color: #ff8aa3; color: #c41f4b; }
.rem .del { opacity: .35; }
.rem:hover .del { opacity: 1; }
.rem-empty { margin: 0 0 8px; font-family: var(--f-hand); font-size: 17px; line-height: 1.3; opacity: .75; }
.rem-add { display: grid; grid-template-columns: minmax(0, 1fr) auto auto 40px; gap: 6px; margin-top: 10px; }
.rem-add input { min-width: 0; min-height: 38px; padding: 6px 10px; border-radius: 12px; border: 1px solid var(--line-strong); background: rgba(255,255,255,.85); font-size: 13px; color: var(--ink); }
[data-skin="night"] .rem-add input { background: rgba(0,0,0,.25); }
.rem-add .rem-text { font-family: var(--f-hand); font-size: 17px; }
.rem-add .rem-when { width: auto; font-weight: 700; }
.rem-add .btn { min-height: 38px; width: 40px; padding: 0; }
.rem-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 10px; }
.rem-list.big .rem { padding: 8px 10px; border-radius: 14px; background: var(--card); box-shadow: var(--shadow-1), 0 0 0 1px var(--line); margin-bottom: 6px; }

/* ---------- paneles laterales ---------- */
.side-stack { gap: 18px; }
.panel { border-radius: var(--r-lg); }
.panel-head { display: flex; align-items: center; gap: 10px; padding: 16px 16px 4px; }
.panel-head h3 { margin: 0; flex: 1; font-family: var(--f-display); font-weight: 700; font-size: 15px; letter-spacing: -.01em; }
.ph-ic { width: 32px; height: 32px; border-radius: 11px; display: grid; place-items: center; color: #fff; font-size: 17px; background: var(--gel-pink); box-shadow: 0 5px 12px -5px rgba(255, 60, 160, .7); flex: none; }
.panel-count { font-size: 12px; font-weight: 800; color: var(--pink); background: var(--pink-l); padding: 3px 9px; border-radius: 999px; }
.panel-body { padding: 10px 16px 16px; }
.panel-body p { margin: 0 0 12px; font-size: 13.5px; color: var(--ink-soft); line-height: 1.45; }
.note-panel { transform: rotate(-.6deg); }
.note-panel .panel-head .link-btn { font-size: 12px; }
.note-panel .notepaper {
  margin: 10px 12px 12px; padding: 10px 14px 14px; border-radius: 16px;
  background: repeating-linear-gradient(180deg, transparent 0 33px, rgba(95, 184, 255, .3) 33px 34px) 0 6px / 100% 34px, linear-gradient(180deg, #fffdf2, #fff6cf);
  box-shadow: inset 0 0 0 1px rgba(230, 197, 72, .35), 0 6px 14px -10px rgba(150, 110, 0, .5);
}
[data-skin="night"] .note-panel .notepaper { background: repeating-linear-gradient(180deg, transparent 0 33px, rgba(255,155,211,.18) 33px 34px) 0 6px / 100% 34px, #261b42; }
.note-panel .notepaper::after { display: none; }
.sticker-grid { grid-template-columns: repeat(5, 1fr); gap: 8px; }
.stk { border-radius: 16px; border: 1.5px dashed var(--line-strong); background: var(--tab-bg); font-size: 24px; }
.stk.on { border: 0; background: radial-gradient(circle at 30% 25%, #fff, var(--pink-l)); box-shadow: var(--shadow-1), 0 0 0 1px var(--line); }
.sample-note { background: linear-gradient(180deg, rgba(255, 250, 220, .9), rgba(255, 240, 180, .85)); }
.sample-note .ph-ic { background: linear-gradient(180deg, #ffe27a, #ffb21a); }
.webring { padding: 4px 0; }
.web-badge { border-radius: 3px; }
.empty-panel { padding: 10px; }
.empty-panel.big { padding: 30px 10px; }
.empty h3 { font-family: var(--f-display); font-weight: 800; font-size: 24px; letter-spacing: -.02em; color: var(--ink); }
.empty-art { position: relative; width: 120px; margin: 0 auto 14px; }
.empty-art .px { width: 120px; margin: 0; }
.e-spark { position: absolute; color: var(--pink); font-size: 20px; animation: twinkle 3s ease-in-out infinite; }
.e-spark.s1 { left: -24px; top: 4px; } .e-spark.s2 { right: -22px; top: 30px; color: var(--sky); animation-delay: -1s; } .e-spark.s3 { left: 50%; top: -24px; color: var(--lila); animation-delay: -2s; }

/* tamagotchi y bocadillo */
.bubble { border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-2); padding: 12px 16px; background: #fff; }
.bubble::before { border-color: var(--line); background: #fff; }
.tama-egg { box-shadow: 0 0 0 1px rgba(255,255,255,.9), 0 16px 26px -10px rgba(150, 60, 170, .45), inset -8px -10px 18px rgba(120, 40, 160, .22); border: 0; }
.tama-egg::before { content: ""; position: absolute; top: -24px; left: 50%; width: 22px; height: 30px; margin-left: -11px; border: 4px solid #d6d9e6; border-bottom: 0; border-radius: 12px 12px 0 0; z-index: -1; }

/* ---------- formularios ---------- */
.input, .field input, .field select, .field textarea { border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: var(--shadow-1); }
.field > span, .legend { font-family: var(--f-pixel); }
.chip span { border: 1px solid var(--line-strong); box-shadow: var(--shadow-1); }
.chip input:checked + span { background: var(--gel-pink); border-color: transparent; }
.tpl span { border: 1px solid var(--line-strong); border-radius: 16px; box-shadow: var(--shadow-1); }

/* ---------- modales, menús, toasts ---------- */
.overlay { background: radial-gradient(circle at 50% 30%, rgba(255, 170, 220, .35), rgba(60, 30, 100, .45)); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.overlay .win { background: var(--glass-strong); }
.modal-actions { border-top: 1px solid var(--line); background: transparent; align-items: center; }
.popmenu { border: 1px solid var(--glass-bd); border-radius: 18px; padding: 6px; background: var(--glass-strong); box-shadow: var(--shadow-3), 0 0 0 1px var(--line); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); min-width: 230px; }
.popmenu button { border-radius: 12px; font-size: 13.5px; padding: 9px 10px; }
.popmenu .pm-ic { width: 22px; display: inline-grid; place-items: center; font-size: 17px; color: var(--pink); }
.popmenu button:hover .pm-ic, .popmenu button:focus-visible .pm-ic { color: #fff; }
.popmenu button:hover, .popmenu button:focus-visible { background: var(--gel-pink); }
.popmenu hr { border-top: 1px solid var(--line); }
.toast { border: 1px solid var(--glass-bd); border-radius: 18px; background: var(--glass-strong); color: var(--ink); box-shadow: var(--shadow-3), 0 0 0 1px var(--line); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.toast.err { background: #fff0f3; }
.toast.sticker { background: linear-gradient(180deg, #fff, #ffe9f5); }

/* ---------- barra de tareas ---------- */
.taskbar {
  background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(246, 236, 255, .82));
  border-top: 1px solid #fff; box-shadow: 0 -10px 30px -12px rgba(110, 60, 170, .35), 0 -1px 0 var(--line);
  backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
}
[data-skin="night"] .taskbar { background: linear-gradient(180deg, rgba(50, 36, 92, .92), rgba(30, 20, 60, .92)); border-top-color: rgba(255,255,255,.1); }
.start-btn { border: 0; border-radius: 999px; margin-left: 2px; height: 40px; background: var(--gel-pink); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 8px 16px -8px rgba(255, 60, 160, .9); font-family: var(--f-display); font-weight: 800; font-style: normal; font-size: 15px; letter-spacing: .02em; }
.task { border: 1px solid var(--line); background: var(--card); color: var(--ink); text-shadow: none; border-radius: 14px; gap: 8px; }
.task i { color: var(--pink); font-size: 17px; }
.task.on { background: var(--card); box-shadow: inset 0 -2px 0 var(--pink), var(--shadow-1); }
.tray { border: 1px solid var(--line); background: var(--card); border-radius: 14px; }
.tray-btn { color: var(--ink-soft); font-size: 18px; display: grid; place-items: center; }
.tray-btn:hover { background: var(--pink-l); color: var(--pink); }
.tray-btn.off { opacity: .4; }
.tray-clock { color: var(--ink); text-shadow: none; font-family: var(--f-body); font-weight: 800; font-size: 13px; }
.startmenu { border: 1px solid var(--glass-bd); border-radius: 24px; background: var(--glass-strong); box-shadow: var(--shadow-3), 0 0 0 1px var(--line); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.sm-head { background: var(--gel-pink); font-family: var(--f-display); font-weight: 800; font-size: 16px; }
.sm-body button i, .sm-foot button i { font-size: 20px; color: var(--pink); width: 26px; }
.sm-body button:hover i, .sm-foot button:hover i { color: #fff; }
.sm-body button:hover, .sm-foot button:hover { background: var(--gel-pink); }
.sm-foot { background: transparent; border-top: 1px solid var(--line); }

/* ==========================================================
   MODO MALETA
   ========================================================== */
.packmode {
  position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; align-items: center;
  padding: max(14px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  background:
    radial-gradient(70vw 60vh at 0% 0%, rgba(255, 160, 215, .75), transparent 70%),
    radial-gradient(60vw 60vh at 100% 20%, rgba(150, 205, 255, .7), transparent 70%),
    radial-gradient(70vw 60vh at 50% 100%, rgba(200, 170, 255, .75), transparent 70%),
    #fbeefa;
  animation: fade .2s ease-out; overflow-y: auto;
}
[data-skin="night"] .packmode { background: radial-gradient(70vw 60vh at 0% 0%, rgba(255, 90, 180, .35), transparent 70%), radial-gradient(60vw 60vh at 100% 20%, rgba(90, 150, 255, .3), transparent 70%), #150f2b; }
.pm-head { width: min(720px, 100%); display: flex; align-items: center; gap: 12px; }
.pm-title { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pm-kicker { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-pixel); font-size: 10px; letter-spacing: .14em; color: #e8459c; }
.pm-title b { font-family: var(--f-display); font-weight: 800; font-size: 20px; letter-spacing: -.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-scope select { min-height: 40px; max-width: 220px; padding: 6px 12px; border-radius: 14px; border: 1px solid var(--line-strong); background: var(--glass-strong); font-weight: 800; font-size: 13px; color: var(--ink); }
.pm-x { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--glass-bd); background: var(--glass-strong); font-size: 20px; display: grid; place-items: center; box-shadow: var(--shadow-1); color: var(--ink); }
.pm-x:hover { background: var(--gel-pink); color: #fff; }
.pm-progress { width: min(720px, 100%); margin: 14px 0 8px; }
.pm-progress .prog { height: 24px; }
.pm-stage { position: relative; flex: 1; width: min(440px, 100%); display: grid; place-items: center; min-height: 340px; margin: 10px 0; }
.pm-ghost, .pm-card { grid-area: 1 / 1; width: 100%; border-radius: 32px; }
.pm-ghost { height: 340px; background: rgba(255,255,255,.5); border: 1px solid rgba(255,255,255,.8); box-shadow: var(--shadow-2); }
.pm-ghost.g1 { transform: translateY(14px) scale(.95) rotate(2deg); }
.pm-ghost.g2 { transform: translateY(26px) scale(.9) rotate(-2.5deg); opacity: .6; }
[data-skin="night"] .pm-ghost { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); }
.pm-card {
  position: relative; min-height: 340px; padding: 30px 26px 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px;
  background: var(--glass-strong); border: 1px solid var(--glass-bd); box-shadow: var(--shadow-3), 0 0 0 1px var(--line);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  touch-action: pan-y; user-select: none; cursor: grab; outline: none;
  animation: card-in .35s cubic-bezier(.3, 1.4, .5, 1);
}
@keyframes card-in { from { transform: translateY(30px) scale(.94); opacity: 0; } }
.pm-card.dragging { cursor: grabbing; transition: none; }
.pm-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(160deg, rgba(255,255,255,.8), transparent 40%); }
.pm-cat { display: flex; flex-direction: column; align-items: center; gap: 8px; font-family: var(--f-pixel); font-size: 10px; letter-spacing: .12em; color: var(--ink-faint); text-transform: uppercase; position: relative; }
.pm-ess { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 800; color: #b07800; background: #fff3c4; padding: 3px 10px; border-radius: 999px; position: relative; }
.pm-name { margin: 6px 0 0; font-family: var(--f-display); font-weight: 800; font-size: clamp(26px, 6vw, 36px); line-height: 1.1; letter-spacing: -.03em; color: var(--ink); word-break: break-word; position: relative; }
.pm-qty { margin: 0; font-family: var(--f-display); font-weight: 900; font-size: 28px; color: var(--pink); position: relative; }
.pm-note { margin: 0; font-family: var(--f-hand); font-size: 20px; color: var(--ink-soft); position: relative; }
.pm-count { margin: 10px 0 0; font-size: 12px; font-weight: 800; color: var(--ink-faint); position: relative; }
.pm-hint { position: absolute; top: 18px; display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: 999px; font-weight: 800; font-size: 13px; opacity: 0; transition: opacity .15s; }
.pm-hint.left { left: 18px; background: #eef0ff; color: #6b6fd8; }
.pm-hint.right { right: 18px; background: #dcfbef; color: #1f8a68; }
.pm-card.lean-right .pm-hint.right, .pm-card.lean-left .pm-hint.left { opacity: 1; }
.pm-card.lean-right { box-shadow: var(--shadow-3), 0 0 0 3px #8ff0cc; }
.pm-card.lean-left { box-shadow: var(--shadow-3), 0 0 0 3px #c4c7ff; }
.pm-actions { display: flex; gap: 12px; align-items: center; justify-content: center; width: min(440px, 100%); margin-top: 18px; }
.pm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 58px; padding: 0 22px; border-radius: 999px;
  border: 1px solid var(--glass-bd); background: var(--glass-strong); color: var(--ink); font-weight: 800; font-size: 16px;
  box-shadow: var(--shadow-2), 0 0 0 1px var(--line); transition: transform .1s;
}
.pm-btn i { font-size: 22px; }
.pm-btn:active { transform: scale(.96); }
.pm-btn:disabled { opacity: .4; }
.pm-btn.ghost { width: 58px; padding: 0; }
.pm-btn.ghost.wide { width: auto; padding: 0 22px; }
.pm-btn.skip { flex: 1; }
.pm-btn.in { flex: 1.5; background: var(--gel-pink); color: #fff; border-color: transparent; font-family: var(--f-display); font-size: 17px; text-shadow: 0 1px 0 rgba(160, 20, 95, .35); box-shadow: 0 14px 26px -12px rgba(255, 60, 160, .9), inset 0 1px 0 rgba(255,255,255,.7); }
.pm-keys { margin: 12px 0 0; font-size: 11.5px; font-weight: 700; color: var(--ink-faint); text-align: center; }
.pm-end { margin: auto 0; width: min(460px, 100%); text-align: center; padding: 34px 26px; border-radius: 32px; background: var(--glass-strong); box-shadow: var(--shadow-3), 0 0 0 1px var(--line); animation: card-in .4s cubic-bezier(.3, 1.4, .5, 1); }
.pm-end-ic { width: 84px; height: 84px; margin: 0 auto 14px; border-radius: 28px; display: grid; place-items: center; font-size: 46px; color: #fff; background: var(--gel-pink); box-shadow: 0 16px 30px -12px rgba(255, 60, 160, .8); }
.pm-end h2 { margin: 0 0 6px; font-family: var(--f-display); font-weight: 900; font-size: 28px; letter-spacing: -.03em; }
.pm-end p { margin: 0 0 14px; color: var(--ink-soft); font-weight: 600; }
.pm-skipped { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.pm-skipped li { padding: 5px 11px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); font-weight: 700; font-size: 13px; }
.pm-end-btns { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }

/* ==========================================================
   SUITCASE MAIL
   ========================================================== */
.mail-win { width: min(760px, 100%) !important; }
.mail-compose { margin: -20px; }
.oe-toolbar { display: flex; align-items: stretch; gap: 2px; padding: 8px 10px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,.6), rgba(240, 232, 255, .5)); }
.oe-tool {
  display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 70px; padding: 6px 10px; border-radius: 14px;
  border: 1px solid transparent; background: transparent; color: var(--ink); font-size: 11.5px; font-weight: 800;
}
.oe-tool i { font-size: 24px; color: var(--pink); }
.oe-tool:hover { background: var(--card); border-color: var(--line); }
.oe-tool.send i { color: #3fc79b; }
.oe-sep { flex: 1; }
.oe-brand { align-self: center; font-family: var(--f-display); font-weight: 900; font-size: 15px; letter-spacing: -.02em; background: linear-gradient(90deg, #ff6fbf, #a98bff, #5fb8ff); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: 6px; }
.oe-fields { display: flex; flex-direction: column; padding: 4px 16px; background: var(--card); border-bottom: 1px solid var(--line); }
.oe-fields label { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); }
.oe-fields label:last-child { border-bottom: 0; }
.oe-fields span { font-size: 12.5px; font-weight: 800; color: var(--ink-faint); text-align: right; }
.oe-fields input { min-height: 40px; border: 0; background: transparent; outline: none; font-size: 15px; font-weight: 700; color: var(--ink); padding: 6px 4px; }
.oe-fields input:focus { background: var(--pink-l); border-radius: 8px; }
.oe-papers { display: flex; gap: 8px; padding: 10px 16px; flex-wrap: wrap; border-bottom: 1px solid var(--line); background: var(--tab-bg); }
.paper-opt input { position: absolute; opacity: 0; }
.paper-opt span { display: inline-block; padding: 8px 14px; border-radius: 12px; font-size: 12.5px; font-weight: 800; color: #4b2a6e; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line); cursor: pointer; }
.paper-opt input:checked + span { box-shadow: 0 0 0 2px var(--pink); }
.oe-body { padding: 18px 20px 20px; }
.oe-body textarea { width: 100%; resize: vertical; border: 0; background: transparent; outline: none; font-family: var(--f-hand); font-size: 20px; line-height: 1.4; color: #4b2a6e; }
.oe-list { margin-top: 10px; padding: 14px; border-radius: 18px; background: rgba(255,255,255,.75); box-shadow: 0 0 0 1px rgba(255,255,255,.9), 0 8px 18px -12px rgba(110, 60, 160, .4); }
.oe-list-head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font-size: 14px; color: #4b2a6e; }
.oe-list-head i { color: var(--pink); font-size: 18px; }
.oe-items { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.oe-items li { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 10px; font-family: var(--f-hand); font-size: 19px; color: #4b2a6e; }
.oe-items li:hover { background: rgba(255, 224, 242, .6); }
.oe-items .nm { flex: 1; }
.oe-items .oe-dot { color: #ff5fae; font-size: 15px; }
.oe-items .oe-empty { font-family: var(--f-body); font-size: 13px; font-weight: 700; color: #a893c2; }
.oe-items .icon-btn { width: 28px; height: 28px; font-size: 15px; }
.oe-add { display: grid; grid-template-columns: minmax(0, 1fr) 62px 40px; gap: 6px; }
.oe-add input { min-height: 40px; border-radius: 12px; border: 1px solid rgba(150, 110, 210, .35); background: #fff; padding: 6px 12px; font-weight: 700; color: #4b2a6e; }
.oe-add .btn { width: 40px; padding: 0; }
.oe-picker { margin-top: 12px; padding-top: 12px; border-top: 1px dashed rgba(150, 110, 210, .35); max-height: 260px; overflow-y: auto; }
.oe-pick-intro { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: #7d5f9e; }
.oe-pick-cat h5 { display: flex; align-items: center; gap: 6px; margin: 10px 0 6px; font-size: 13px; color: #4b2a6e; }
.oe-pick-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.pick-chip { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(150, 110, 210, .35); background: #fff; font-size: 12.5px; font-weight: 700; color: #4b2a6e; }
.pick-chip i { color: var(--pink); }
.pick-chip.on { background: var(--gel-pink); color: #fff; border-color: transparent; }
.pick-chip.on i { color: #fff; }
.oe-foot { margin-right: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--ink-faint); }
/* papeles de carta */
.paper-hearts { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cpath d='M22 28c-5-4-8-6-8-9a4 4 0 0 1 8-1 4 4 0 0 1 8 1c0 3-3 5-8 9z' fill='%23ff8fcf' fill-opacity='.18'/%3E%3C/svg%3E"), linear-gradient(135deg, #fff0f8, #ffe0f0); }
.paper-sky { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='40'%3E%3Cellipse cx='20' cy='22' rx='12' ry='6' fill='%23fff' fill-opacity='.7'/%3E%3Cellipse cx='28' cy='18' rx='8' ry='6' fill='%23fff' fill-opacity='.7'/%3E%3C/svg%3E"), linear-gradient(135deg, #eef8ff, #d9ecff); }
.paper-stars { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M20 12l2 6 6 2-6 2-2 6-2-6-6-2 6-2z' fill='%23a98bff' fill-opacity='.22'/%3E%3C/svg%3E"), linear-gradient(135deg, #f6f1ff, #e6dcff); }
.paper-cherry { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Ccircle cx='18' cy='30' r='5' fill='%23ff6f91' fill-opacity='.22'/%3E%3Ccircle cx='28' cy='32' r='5' fill='%23ff6f91' fill-opacity='.22'/%3E%3Cpath d='M18 25q4-10 12-12M28 27q-2-8 2-14' stroke='%237fc47a' stroke-opacity='.35' fill='none' stroke-width='1.5'/%3E%3C/svg%3E"), linear-gradient(135deg, #fffaf0, #ffe8ee); }

/* sobre */
.env { position: relative; display: block; width: 120px; height: 80px; border-radius: 10px; background: linear-gradient(180deg, #ffd6ec, #ffb0d9); box-shadow: 0 14px 28px -12px rgba(255, 60, 160, .6), inset 0 0 0 1px rgba(255,255,255,.7); overflow: visible; }
.env::after { content: ""; position: absolute; inset: 0; border-radius: 10px; background: linear-gradient(145deg, transparent 49.5%, rgba(220, 70, 150, .25) 50%, transparent 51%), linear-gradient(-145deg, transparent 49.5%, rgba(220, 70, 150, .25) 50%, transparent 51%); z-index: 2; pointer-events: none; }
.env-flap { position: absolute; left: 0; right: 0; top: 0; height: 60%; z-index: 3; transform-origin: top; background: linear-gradient(180deg, #ffc2e3, #ff9fd0); clip-path: polygon(0 0, 100% 0, 50% 100%); border-radius: 10px 10px 0 0; transition: transform .5s ease; }
.env-letter { position: absolute; left: 10%; right: 10%; top: 10%; height: 75%; z-index: 1; border-radius: 6px; background: #fff; display: grid; place-items: center; color: #ff5fae; font-size: 26px; box-shadow: 0 2px 6px rgba(0,0,0,.08); transition: transform .5s .25s cubic-bezier(.3, 1.4, .5, 1); }
.env-stamp { position: absolute; right: 8px; top: 8px; z-index: 4; padding: 3px 5px; border: 2px dashed #ff5fae; border-radius: 4px; background: #fff; font-family: var(--f-pixel); font-size: 9px; color: #ff5fae; transform: rotate(6deg); }
.env.small { width: 84px; height: 56px; }
.env.small .env-letter { font-size: 18px; }
.env-anim { display: grid; place-items: center; height: 120px; }
.env-anim .env { animation: env-send 1.6s ease-in-out .2s both; }
.env-anim .env-flap { animation: flap-close .4s ease .1s both; }
@keyframes flap-close { from { transform: rotateX(180deg); } to { transform: rotateX(0); } }
@keyframes env-send { 0% { transform: translateY(10px) scale(.9); opacity: 0; } 30% { transform: translateY(0) scale(1); opacity: 1; } 70% { transform: translateY(0) rotate(-3deg); } 100% { transform: translateY(-6px) rotate(0); } }
.sent-box { text-align: center; }
.sent-box h3 { margin: 6px 0; font-family: var(--f-display); font-weight: 800; font-size: 22px; letter-spacing: -.02em; }
.sent-box p { margin: 0 0 14px; color: var(--ink-soft); font-size: 14px; line-height: 1.45; }
.link-box { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; margin-bottom: 12px; }
.link-box input { font-size: 12.5px; font-weight: 700; color: var(--ink-soft); }
.share-row { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }

/* pestaña Correos */
.mail-intro { display: flex; gap: 22px; align-items: center; padding: 20px; border-radius: 22px; background: linear-gradient(135deg, #fff0f8, #f0e8ff); box-shadow: inset 0 0 0 1px rgba(255,255,255,.9), 0 0 0 1px var(--line); }
[data-skin="night"] .mail-intro { background: linear-gradient(135deg, #3a2650, #2a2050); }
.mail-intro h3 { margin: 0 0 4px; font-family: var(--f-display); font-weight: 800; font-size: 20px; letter-spacing: -.02em; }
.mail-intro p { margin: 0 0 14px; color: var(--ink-soft); font-size: 14px; line-height: 1.5; max-width: 60ch; }
.mail-intro-art { flex: none; padding: 0 6px; }
.mail-intro-art .env { animation: floaty 4s ease-in-out infinite; }
.mail-list-head { display: flex; align-items: center; justify-content: space-between; margin: 22px 0 10px; }
.mail-list-head h4 { margin: 0; display: flex; align-items: center; gap: 6px; font-family: var(--f-display); font-weight: 700; font-size: 15px; }
.mail-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.mail-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 14px; border-radius: 18px; background: var(--card); box-shadow: var(--shadow-1), 0 0 0 1px var(--line); }
.mail-row-ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-size: 24px; color: #fff; background: var(--gel-pink); }
.mail-row-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.mail-row-sub { margin: 2px 0 8px; font-size: 13px; color: var(--ink-soft); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-row-meta { margin-top: 6px; font-size: 12px; font-weight: 700; color: var(--ink-faint); }
.mail-row-act { display: flex; gap: 2px; }
.mstat { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 800; padding: 2px 9px; border-radius: 999px; }
.mstat.new { background: var(--tab-bg); color: var(--ink-soft); }
.mstat.read { background: var(--sky-l); color: #2a76c4; }
.mstat.ok { background: #dcfbef; color: #1f8a68; }
.mstat.gone { background: #eee; color: #888; }
.mail-reply { margin: 10px 0 0; padding: 10px 12px; border-radius: 14px; background: #fffbe6; border: 1px solid #f0dc8a; font-family: var(--f-hand); font-size: 17px; color: #4b2a6e; }
.mail-reply i { color: var(--pink); }

/* modo "abrir correo" (quien recibe) */
.mail-mode .taskbar, .mail-mode .startmenu, .mail-mode .marquee { display: none !important; }
.mail-mode { padding-bottom: 24px; }
.mail-loading { display: grid; place-items: center; gap: 10px; min-height: 50vh; color: var(--ink-soft); font-weight: 800; }
.mail-loading i { font-size: 54px; color: var(--pink); animation: floaty 2s ease-in-out infinite; }
.big-ic { font-size: 64px; color: var(--pink); display: block; margin: 0 auto 10px; }
.ygm { min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px; padding: 20px 0; }
.ygm-kicker { margin: 0; font-family: var(--f-pixel); font-size: 11px; letter-spacing: .2em; color: var(--ink-soft); text-transform: uppercase; }
.ygm-title {
  margin: 0 0 18px; font-family: var(--f-display); font-weight: 900; font-size: clamp(38px, 9vw, 84px); line-height: .95; letter-spacing: -.04em;
  background: linear-gradient(180deg, #fff 0%, #ffe0f1 22%, #ff8acb 46%, #ff3d9d 54%, #ff9ad1 74%, #fff3fa 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: 1.5px rgba(210, 40, 130, .28);
  filter: drop-shadow(0 2px 0 #fff) drop-shadow(0 14px 18px rgba(255, 70, 160, .3));
}
.ygm-env { border: 0; background: none; padding: 30px; cursor: pointer; animation: env-bounce 1.8s ease-in-out infinite; }
.ygm-env:hover .env-flap { transform: rotateX(25deg); }
.env.big { width: 240px; height: 160px; border-radius: 16px; }
.env.big::after { border-radius: 16px; }
.env.big .env-flap { border-radius: 16px 16px 0 0; }
.env.big .env-letter { font-size: 52px; border-radius: 10px; }
.env.big .env-stamp { font-size: 12px; padding: 6px 8px; right: 14px; top: 14px; }
@keyframes env-bounce { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-12px) rotate(2deg); } }
.ygm-env.opening { animation: none; }
.ygm-env.opening .env-flap { transform: rotateX(180deg); z-index: 0; }
.ygm-env.opening .env-letter { transform: translateY(-70%) scale(1.05); z-index: 5; }
.ygm-from { margin: 10px 0 0; font-size: 16px; color: var(--ink-soft); }
.ygm-from b { color: var(--ink); }

.mailbox { overflow: hidden; animation: card-in .45s cubic-bezier(.3, 1.3, .5, 1); }
.mb-toolbar { display: flex; gap: 4px; padding: 8px 12px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,.7), rgba(240, 232, 255, .5)); flex-wrap: wrap; }
[data-skin="night"] .mb-toolbar, [data-skin="night"] .oe-toolbar { background: rgba(255,255,255,.04); }
.mb-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); }
.mb-folders { padding: 16px 12px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 3px; background: rgba(255,255,255,.35); }
[data-skin="night"] .mb-folders { background: rgba(0,0,0,.12); }
.mb-user { display: flex; align-items: center; gap: 8px; padding: 4px 8px 14px; font-weight: 800; }
.mb-user .px { width: 22px; }
.mb-folders > a { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; font-size: 13.5px; font-weight: 700; color: var(--ink-soft); }
.mb-folders > a i { font-size: 18px; color: var(--lila); }
.mb-folders > a.on { background: var(--card); color: var(--ink); box-shadow: var(--shadow-1), 0 0 0 1px var(--line); }
.mb-folders > a.on i { color: var(--pink); }
.mb-folders > a b { margin-left: auto; font-size: 11px; color: #fff; background: var(--gel-pink); padding: 1px 7px; border-radius: 999px; }
.mb-ad { margin-top: auto; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; padding: 14px; border-radius: 16px; background: linear-gradient(135deg, #fff0f8, #e9f4ff); border: 1px dashed var(--line-strong); font-size: 12px; }
[data-skin="night"] .mb-ad { background: rgba(255,255,255,.05); }
.mb-ad i { font-size: 20px; color: var(--pink); }
.mb-ad span { color: var(--ink-soft); font-weight: 600; margin-bottom: 6px; }
.mb-msg { padding: 22px 26px 26px; min-width: 0; }
.mb-head h2 { margin: 0 0 12px; font-family: var(--f-display); font-weight: 800; font-size: clamp(20px, 3vw, 26px); letter-spacing: -.025em; line-height: 1.15; }
.mb-head dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; margin: 0 0 18px; padding: 12px 14px; border-radius: 16px; background: var(--card); box-shadow: 0 0 0 1px var(--line); font-size: 13.5px; }
.mb-head dt { font-weight: 800; color: var(--ink-faint); }
.mb-head dd { margin: 0; color: var(--ink); }
.mb-head dd i { color: var(--pink); }
.mb-paper { position: relative; padding: 24px 24px 22px; border-radius: 22px; color: #4b2a6e; box-shadow: inset 0 0 0 1px rgba(255,255,255,.9), 0 14px 30px -18px rgba(110, 60, 160, .45); }
.mb-text { margin: 0 0 18px; font-family: var(--f-hand); font-size: 21px; line-height: 1.45; }
.mb-progress { margin-bottom: 12px; }
.mb-items { list-style: none; margin: 0; padding: 8px; display: flex; flex-direction: column; gap: 2px; border-radius: 18px; background: rgba(255,255,255,.78); }
.mb-items li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 10px; border-radius: 14px; }
.mb-items li + li { box-shadow: 0 -1px 0 rgba(150, 110, 210, .15); }
.mb-items li .stamp { display: none; }
.mb-items li.is-packed .stamp { display: inline-block; }
.mb-items li.is-packed .label { text-decoration: line-through; text-decoration-color: #ff5fae; text-decoration-thickness: 2px; opacity: .55; }
.mb-item-name { font-size: 16px; font-weight: 700; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mb-item-name small { flex-basis: 100%; font-weight: 500; font-size: 12.5px; color: #8a73aa; }
.mb-done { margin: 14px 0 0; text-align: center; font-weight: 800; color: #1f8a68; }
.mb-sign { margin: 18px 0 0; text-align: right; font-family: var(--f-hand); font-size: 22px; }
.mb-sign small { font-family: var(--f-pixel); font-size: 9px; letter-spacing: .1em; color: #a893c2; }
.mb-reply { margin-top: 18px; padding: 16px; border-radius: 20px; background: var(--card); box-shadow: var(--shadow-1), 0 0 0 1px var(--line); }
.mb-reply label { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font-weight: 800; font-size: 14px; }
.mb-reply label i { color: var(--pink); font-size: 18px; }
.mb-reply textarea { width: 100%; resize: vertical; min-height: 80px; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--line-strong); background: var(--tab-bg); font-family: var(--f-hand); font-size: 19px; color: var(--ink); outline: none; }
.mb-reply textarea:focus { border-color: var(--pink); background: var(--card); }
.mb-reply-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.mb-reply-foot span { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 800; color: #2fa57d; }
.mail-404 { max-width: 520px; margin: 40px auto; }

/* ---------- responsive ---------- */
@media (max-width: 1020px) {
  .hero-home { grid-template-columns: 1fr; }
  .hh-right { justify-content: flex-start; }
  .pass-hero { grid-template-columns: 1fr; }
  .pass-hero::before, .pass-hero::after { display: none; }
  .pass-hero .pass-stub { border-left: 0; border-top: 2px dashed color-mix(in srgb, var(--tc) 60%, transparent); flex-direction: row; flex-wrap: wrap; justify-content: space-between; }
  .pass-hero .pass-stub .weather { flex: 1 1 260px; }
  .pass-hero .barcode { display: none; }
  .pass-hero .pass-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
  .status-card { grid-template-columns: auto minmax(0, 1fr); padding: 20px; }
  .status-mini { display: none; }
  .tool-row { margin-left: 0; }
  .list-layout { grid-template-columns: 1fr; }
  .cat-nav { margin: -22px -22px 6px; padding: 12px 16px; border-radius: var(--r-xl) var(--r-xl) 0 0; background: var(--glass-strong); border-bottom: 1px solid var(--line); }
  .cat-nav button { background: var(--card); border-color: var(--line); grid-template-columns: auto auto auto; }
  .mb-layout { grid-template-columns: 1fr; }
  .mb-folders { display: none; }
}
@media (max-width: 640px) {
  .topbar { flex-direction: row; align-items: center; }
  .marquee { display: none; }
  .logo-text { font-size: 26px; }
  .hero-home { padding: 26px 20px; border-radius: 24px; }
  .hh-cta .btn-big { width: 100%; }
  .next-pill { width: 100%; }
  .passes { grid-template-columns: 1fr; }
  .pass { grid-template-columns: minmax(0, 1fr) 108px; }
  .pass::before, .pass::after { right: 97px; }
  .pass-main { padding: 0 14px 14px; }
  .pass-top { margin: 0 -14px; padding-left: 14px; }
  .pass-kind { display: none; }
  .pass-code b { font-size: 32px; }
  .stub-art, .stub-art .px { width: 56px; }
  .stub-pct b { font-size: 22px; }
  .pass-hero { grid-template-columns: 1fr; }
  .pass-hero .pass-main { padding: 0 16px 16px; }
  .pass-hero .pass-top { margin: 0 -16px; padding-left: 16px; }
  .pass-hero .pass-code b { font-size: 44px; }
  .pass-hero .stub-art { display: none; }
  .status-card { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 14px; }
  .status-info { width: 100%; }
  .status-info .kicker { justify-content: center; }
  .counts { grid-template-columns: repeat(2, 1fr); }
  .status-actions { flex-direction: column; align-items: stretch; }
  .btn-pack { width: 100%; }
  .tool-row { justify-content: center; }
  .tool span { display: none; }
  .tool { padding: 10px 12px; }
  .tool i { font-size: 22px; }
  .tab { flex: 0 0 auto; padding: 9px 12px; }
  .tab-panel { padding: 16px; }
  .cat-nav { margin: -16px -16px 6px; }
  .item { grid-template-columns: 32px minmax(0, 1fr) 34px 34px; }
  .item .star-btn { grid-column: 3; }
  .item .more-btn { grid-column: 4; }
  .item .qty { grid-column: 2; grid-row: 2; }
  .add-item { padding: 6px 12px 14px; }
  .cat-empty { padding-left: 16px; }
  .rem-add { grid-template-columns: 1fr 1fr 40px; }
  .rem-add .rem-text { grid-column: 1 / -1; }
  .mail-intro { flex-direction: column; text-align: center; }
  .mail-row { grid-template-columns: minmax(0, 1fr); }
  .mail-row-ic { display: none; }
  .mail-row-act { justify-content: flex-end; }
  .mb-msg { padding: 16px; }
  .mb-paper { padding: 18px 14px; }
  .oe-tool { min-width: 58px; padding: 6px; }
  .oe-brand { display: none; }
  .pm-actions { gap: 8px; }
  .pm-btn { min-height: 54px; padding: 0 14px; font-size: 15px; }
  .pm-btn.ghost { width: 54px; }
  .pm-keys { display: none; }
  .pm-scope select { max-width: 150px; }
  .start-btn { padding: 0 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .hh-deco .disc, .h-heart, .ygm-env, .pass { animation: none !important; }
}

/* impresión del correo */
@media print {
  body.mail-mode > *:not(#app) { display: none !important; }
  body.mail-mode #app { display: block !important; }
  body.mail-mode .mb-folders, body.mail-mode .mb-toolbar, body.mail-mode .mb-reply { display: none !important; }
}

/* ---------- ajustes tras revisión ---------- */
/* los iconos duotone usan dos pseudo-capas: nunca grid/flex en el propio <i> */
.next-pill > i, .h-title i { display: inline-block; text-align: center; line-height: 40px; }
.h-title i { line-height: 38px; }
/* cromado nítido (sin trazo, que duplicaba la imagen) */
.chrome-title, .logo-text, .ygm-title {
  -webkit-text-stroke: 0;
  background-image: linear-gradient(180deg, #ffb8e0 0%, #ff6fbf 38%, #e8268a 52%, #ff5fae 64%, #ffc2e4 100%);
  filter: drop-shadow(0 2px 0 #fff) drop-shadow(0 8px 14px rgba(255, 60, 160, .25));
}
[data-skin="aqua"] .chrome-title { background-image: linear-gradient(180deg, #b8e0ff 0%, #5fb0ff 38%, #1670d8 52%, #4aa3ff 64%, #c2e2ff 100%); }
[data-skin="lilac"] .chrome-title { background-image: linear-gradient(180deg, #e2ccff 0%, #b07cff 38%, #7a3fe0 52%, #a774ff 64%, #e4d4ff 100%); }
.section-head .h-title { font-family: var(--f-display); font-size: 22px; letter-spacing: -.02em; text-shadow: none; }
.pass-top { color: color-mix(in srgb, var(--tc-d) 55%, #2a1840); }
.pass-air, .pass-kind { text-shadow: none; }
.pass-kind { background: rgba(255,255,255,.55); border-color: rgba(255,255,255,.9); }
.pass-menu { background: rgba(255,255,255,.5); color: inherit; }
.pass-menu:hover { background: #fff; }
.pass-tools { margin-left: auto; }
.pass-kind + .pass-tools { margin-left: 0; }
.tip-chip { display: block; line-height: 1.45; }
.tip-chip i { vertical-align: -3px; margin-right: 2px; }
.pm-stage { min-height: 0; }
.pm-card, .pm-ghost { min-height: min(340px, 44vh); height: auto; }
.pm-ghost { height: min(340px, 44vh); }
@media (max-height: 720px) { .pm-name { font-size: clamp(22px, 5vw, 30px); } .pm-card { padding: 20px 20px 16px; gap: 6px; } .jelly.lg { width: 60px; height: 60px; font-size: 32px; } .pm-actions { margin-top: 12px; } }