/* Layout: una bodega personal. Cabecera con copa que se llena según lo probado, pestañas fijas, rejilla de fichas tipo contraetiqueta, hoja inferior para añadir y ver. */
:root{
  --bg:#f5f3f6; --surface:#ffffff; --surface-2:#ece8ee; --line:#ddd6e0;
  --fg:#1c1320; --muted:#6c5f71; --accent:#7a1f3d; --accent-ink:#ffffff; --accent-soft:#f3e3e9;
  --shadow:0 1px 2px rgba(40,10,30,.06),0 8px 24px -12px rgba(40,10,30,.18);
  --ok:#2f7a4f; --danger:#b3261e;
  /* color del vino por tipo */
  --w-tinto:#6e1630; --w-blanco:#e3cf6e; --w-rosado:#ef9a86; --w-espumoso:#efe2a2; --w-generoso:#b5702a; --w-dulce:#7b3814;
  /* contraetiquetas: joven verde, crianza roja, reserva granate, gran reserva azul */
  --c-joven:#3d8a4e; --c-roble:#8a6a3d; --c-crianza:#c8323a; --c-reserva:#7d1d33; --c-gran:#2b4a9a; --c-otro:#6c5f71;
  --f-display:"Bodoni Moda","Didot","Bodoni 72",Georgia,serif;
  --f-body:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"DM Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --r:14px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#120b11; --surface:#1c131b; --surface-2:#271a25; --line:#3a2937;
  --fg:#f3e9ef; --muted:#b29fac; --accent:#e07393; --accent-ink:#1a0c13; --accent-soft:#3a1d2a;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px -14px rgba(0,0,0,.7);
  --ok:#6fc28f; --danger:#ff8a80; --c-otro:#b29fac;
  color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#120b11; --surface:#1c131b; --surface-2:#271a25; --line:#3a2937;
  --fg:#f3e9ef; --muted:#b29fac; --accent:#e07393; --accent-ink:#1a0c13; --accent-soft:#3a1d2a;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px -14px rgba(0,0,0,.7);
  --ok:#6fc28f; --danger:#ff8a80; --c-otro:#b29fac;
  color-scheme:dark}

*{box-sizing:border-box}
html,body{background:var(--bg)}
body{color:var(--fg);font-family:var(--f-body);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}

/* ---------- Cabecera ---------- */
header.hero{padding-block:28px 18px}
.hero-row{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.hero-title{flex:1 1 200px;min-width:0}
.glass{width:74px;height:104px;flex:none}
.glass .wine{transition:transform 1.4s cubic-bezier(.2,.8,.2,1)}
.glass .surf{animation:slosh 4s ease-in-out infinite}
@keyframes slosh{0%,100%{transform:translateX(0)}50%{transform:translateX(-6px)}}
.hero h1{font-family:var(--f-display);font-weight:500;font-style:italic;font-size:clamp(2.4rem,7vw,4.2rem);line-height:.95;margin:0;letter-spacing:-.01em;text-wrap:balance}
.hero h1 b{font-style:normal;font-weight:700;color:var(--accent)}
.hero .tag{margin:8px 0 0;color:var(--muted);font-size:.95rem}
.counts{display:flex;gap:18px;margin-left:auto;flex-wrap:wrap}
.count{display:flex;flex-direction:column;align-items:flex-start}
.count .n{font-family:var(--f-display);font-size:2rem;font-weight:600;line-height:1;font-variant-numeric:lining-nums tabular-nums}
.count .l{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}

/* ---------- Pestañas ---------- */
nav.tabs{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.tabs-inner{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding-block:10px}
.tabs-inner::-webkit-scrollbar{display:none}
.tab{position:relative;border:0;background:none;padding:8px 14px;border-radius:999px;white-space:nowrap;color:var(--muted);font-weight:600;font-size:.92rem;transition:color .2s}
.tab .badge{font-family:var(--f-mono);font-size:.72rem;margin-left:6px;opacity:.7}
.tab[aria-selected="true"]{color:var(--accent-ink)}
.tab-pill{position:absolute;inset:0;border-radius:999px;background:var(--accent);z-index:-1;transition:transform .35s cubic-bezier(.2,.8,.2,1),width .35s cubic-bezier(.2,.8,.2,1)}
.tabs-track{position:relative;display:flex;gap:4px;isolation:isolate}
.pill{position:absolute;top:0;left:0;height:100%;border-radius:999px;background:var(--accent);z-index:-1;transition:transform .4s cubic-bezier(.2,.8,.2,1),width .4s cubic-bezier(.2,.8,.2,1)}

/* ---------- Herramientas ---------- */
.tools{display:flex;gap:10px;flex-wrap:wrap;align-items:center;padding-block:18px 6px}
.search{flex:1 1 240px;min-width:0;position:relative}
.search input{width:100%;padding:11px 14px 11px 40px;border-radius:12px;border:1px solid var(--line);background:var(--surface);transition:border-color .2s,box-shadow .2s}
.search input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.search svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--muted)}
select.ctl{padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--surface);max-width:100%}
.chips{display:flex;gap:6px;flex-wrap:wrap;padding-block:6px 4px}
.chip{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 12px 6px 9px;font-size:.85rem;font-weight:600;display:inline-flex;align-items:center;gap:7px;transition:all .2s}
.chip .dot{width:10px;height:10px;border-radius:50%;background:var(--dot)}
.chip[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.chip:hover{transform:translateY(-1px)}

/* ---------- Rejilla de vinos ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px;padding-block:14px 120px}
.card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;display:flex;flex-direction:column;gap:12px;text-align:left;box-shadow:var(--shadow);animation:rise .55s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 45ms);transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s;min-width:0;overflow:hidden}
.card:hover{transform:translateY(-4px)}
@keyframes rise{from{transform:translateY(14px) scale(.98)}to{transform:none}}
.card-top{display:flex;gap:14px;align-items:flex-start}
.swatch{flex:none;width:54px;height:54px;border-radius:50%;background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--wc) 55%,white) 0%,var(--wc) 45%,color-mix(in srgb,var(--wc) 70%,black) 100%);box-shadow:inset 0 0 0 3px color-mix(in srgb,var(--wc) 30%,transparent),0 6px 14px -6px var(--wc);position:relative;overflow:hidden}
.swatch::after{content:"";position:absolute;inset:-30%;background:radial-gradient(circle,rgba(255,255,255,.55),transparent 55%);transform:translate(-30%,-30%);opacity:.35;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.card:hover .swatch::after{transform:translate(20%,15%)}
.swatch.photo{border-radius:12px;background-size:cover;background-position:center}
.swatch.photo::after{display:none}
.card h3{font-family:var(--f-display);font-weight:600;font-size:1.32rem;line-height:1.12;margin:0;text-wrap:balance;overflow-wrap:anywhere}
.card .sub{color:var(--muted);font-size:.87rem;margin-top:3px;overflow-wrap:anywhere}
.fav{position:absolute;top:12px;right:12px;border:0;background:none;padding:4px;color:var(--muted);transition:transform .2s}
.fav[aria-pressed="true"]{color:var(--accent)}
.fav:active{transform:scale(1.3)}
.meta{display:flex;gap:6px;flex-wrap:wrap}
.lbl{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:6px;border:1px solid var(--line);color:var(--muted)}
.lbl.cr{border:0;color:#fff;background:var(--cc)}
.lbl.ex{border-style:dashed}
.card-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:10px;border-top:1px dashed var(--line)}
.price{font-family:var(--f-mono);font-size:1rem;font-variant-numeric:tabular-nums}
.drops{display:inline-flex;gap:2px;color:var(--accent)}
.drops svg{width:15px;height:15px}
.drops .off{opacity:.2}
.btn{border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:8px 13px;font-weight:600;font-size:.87rem;display:inline-flex;align-items:center;gap:6px;transition:transform .15s,background .2s,border-color .2s}
.btn:hover{border-color:var(--accent)}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn.ghost{border-color:transparent;background:none}
.btn.danger{color:var(--danger)}
.btn.sm{padding:6px 10px;font-size:.8rem}
.card-click{all:unset;position:absolute;inset:0;border-radius:var(--r);cursor:pointer}
.card-click:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.card .btn{position:relative;z-index:2}
.card .fav{z-index:2}

/* ---------- Vacío ---------- */
.empty{grid-column:1/-1;text-align:center;padding:60px 16px;color:var(--muted)}
.empty h2{font-family:var(--f-display);font-style:italic;font-weight:500;font-size:1.8rem;color:var(--fg);margin:0 0 6px}
.empty .btn{margin-top:16px}

/* ---------- Botón flotante ---------- */
.fab{position:fixed;right:calc(20px + env(safe-area-inset-right,0px));bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:30;border:0;border-radius:999px;background:var(--accent);color:var(--accent-ink);padding:15px 22px 15px 18px;font-weight:700;display:flex;align-items:center;gap:8px;box-shadow:0 14px 30px -10px color-mix(in srgb,var(--accent) 70%,transparent);transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.fab:hover{transform:translateY(-2px) scale(1.03)}
.fab svg{transition:transform .3s}
.fab:hover svg{transform:rotate(90deg)}

/* ---------- Hoja (modal) ---------- */
.scrim{position:fixed;inset:0;z-index:50;background:rgba(15,5,12,.5);backdrop-filter:blur(3px);display:flex;align-items:flex-end;justify-content:center;animation:fade .25s both}
.scrim[hidden]{display:none!important}
@keyframes fade{from{opacity:0}}
.sheet{background:var(--bg);width:100%;max-width:720px;max-height:92vh;max-height:92dvh;overflow:auto;border-radius:22px 22px 0 0;padding:8px max(18px,env(safe-area-inset-right,0px)) calc(24px + env(safe-area-inset-bottom,0px)) max(18px,env(safe-area-inset-left,0px));animation:up .4s cubic-bezier(.2,.8,.2,1) both;overscroll-behavior:contain}
@media (min-width:760px){.scrim{align-items:center}.sheet{border-radius:22px;max-height:88vh}}
@keyframes up{from{transform:translateY(40px);opacity:.3}}
.grab{width:42px;height:5px;border-radius:9px;background:var(--line);margin:4px auto 10px}
.sheet h2{font-family:var(--f-display);font-weight:600;font-size:1.8rem;margin:0 0 4px;line-height:1.1;text-wrap:balance}
.sheet-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;position:sticky;top:-8px;background:var(--bg);padding-block:8px 10px;z-index:2}
.form{display:grid;grid-template-columns:1fr 1fr;gap:14px 14px}
.form .full{grid-column:1/-1}
@media (max-width:520px){.form{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field>span{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.field input,.field select,.field textarea{width:100%;padding:11px 12px;border-radius:11px;border:1px solid var(--line);background:var(--surface);transition:border-color .2s,box-shadow .2s}
.field textarea{min-height:84px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.hint{font-size:.8rem;color:var(--muted)}
.seg{display:flex;gap:6px;flex-wrap:wrap}
.seg button{border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:8px 12px;font-weight:600;font-size:.88rem;display:inline-flex;align-items:center;gap:7px;transition:all .2s}
.seg button[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.seg .dot{width:10px;height:10px;border-radius:50%;background:var(--dot)}
.rate{display:flex;gap:4px}
.rate button{border:0;background:none;padding:3px;color:var(--accent);transition:transform .2s cubic-bezier(.3,1.6,.5,1)}
.rate button svg{width:28px;height:28px}
.rate button.off{opacity:.22}
.rate button:hover{transform:scale(1.18)}
.grapes{display:flex;gap:6px;flex-wrap:wrap}
.grapes button{border:1px dashed var(--line);background:none;border-radius:999px;padding:5px 11px;font-size:.84rem;transition:all .2s}
.grapes button[aria-pressed="true"]{border-style:solid;background:var(--accent-soft);border-color:var(--accent);color:var(--fg);font-weight:600}
.tasting{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:16px;border-radius:14px;background:var(--surface-2);animation:rise .4s both}
@media (max-width:520px){.tasting{grid-template-columns:1fr}}
.tasting .full{grid-column:1/-1}
.actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin-top:18px}
.photo-pick{display:flex;gap:12px;align-items:center}
.photo-prev{width:64px;height:64px;border-radius:12px;background:var(--surface-2) center/cover;border:1px solid var(--line);flex:none}

/* ---------- Detalle ---------- */
.detail-top{display:flex;gap:18px;align-items:center;margin-bottom:14px}
.detail-top .swatch{width:84px;height:84px}
.detail-top .swatch.photo{width:96px;height:120px}
.dl{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin:16px 0}
.dl div{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 12px;min-width:0}
.dl dt{font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.dl dd{margin:2px 0 0;font-weight:600;overflow-wrap:anywhere}
.note{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px;margin-top:10px;white-space:pre-wrap;font-family:var(--f-display);font-style:italic;font-size:1.08rem;line-height:1.45}
.confirm{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--danger) 12%,transparent);animation:rise .3s both}

/* ---------- Descubrir ---------- */
.regions{display:flex;gap:6px;flex-wrap:wrap;padding-block:18px 6px}
.dos{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px;padding-block:14px 120px}
.do{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px;display:flex;flex-direction:column;gap:10px;animation:rise .5s both;animation-delay:calc(var(--i,0) * 30ms);min-width:0}
.do-head{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.do h3{font-family:var(--f-display);font-size:1.35rem;font-weight:600;margin:0;line-height:1.1}
.do .cat{font-family:var(--f-mono);font-size:.72rem;color:var(--accent);white-space:nowrap}
.do p{margin:0;color:var(--muted);font-size:.9rem;max-width:65ch}
.do .g{font-size:.82rem}
.do .g b{font-weight:600}
.do-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:auto;padding-top:10px;border-top:1px dashed var(--line)}
.mine{font-size:.8rem;color:var(--muted)}
.mine.has{color:var(--ok);font-weight:600}

/* ---------- Estadísticas ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;padding-block:20px 120px}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px;animation:rise .5s both;min-width:0}
.panel h3{margin:0 0 14px;font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.big{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.big .n{font-family:var(--f-display);font-size:2.2rem;font-weight:600;line-height:1;font-variant-numeric:lining-nums tabular-nums}
.big .l{font-size:.8rem;color:var(--muted)}
.bars{display:flex;flex-direction:column;gap:10px}
.bar{display:grid;grid-template-columns:minmax(0,110px) 1fr 34px;gap:10px;align-items:center;font-size:.88rem}
.bar .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar .track{height:10px;border-radius:9px;background:var(--surface-2);overflow:hidden}
.bar .fill{height:100%;border-radius:9px;background:var(--bc,var(--accent));transform-origin:left;animation:grow .9s cubic-bezier(.2,.8,.2,1) both}
.bar .v{font-family:var(--f-mono);text-align:right;font-variant-numeric:tabular-nums}
@keyframes grow{from{transform:scaleX(0)}}

/* ---------- Avisos ---------- */
.toast{position:fixed;left:50%;bottom:calc(90px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:60;background:var(--fg);color:var(--bg);padding:11px 18px;border-radius:999px;font-weight:600;font-size:.9rem;box-shadow:var(--shadow);animation:toast 2.6s cubic-bezier(.2,.8,.2,1) both;max-width:calc(100% - 32px);text-align:center}
@keyframes toast{0%{opacity:0;transform:translate(-50%,16px)}10%,85%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,8px)}}
.notice{margin-top:14px;padding:10px 14px;border-radius:12px;background:var(--accent-soft);font-size:.86rem}
.splash{position:fixed;inset:0;pointer-events:none;z-index:70}
.splash i{position:absolute;width:10px;height:13px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:var(--accent);animation:drop 1.1s cubic-bezier(.2,.7,.4,1) forwards}
@keyframes drop{to{transform:translate(var(--dx),var(--dy)) rotate(var(--r));opacity:0}}

.loading{grid-column:1/-1;display:flex;gap:10px;justify-content:center;align-items:center;padding:60px 0;color:var(--muted)}
.loading span{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:bob 1s ease-in-out infinite}
.loading span:nth-child(2){animation-delay:.15s}.loading span:nth-child(3){animation-delay:.3s}
@keyframes bob{50%{transform:translateY(-8px);opacity:.4}}

@media (max-width:560px){
  .counts{margin-left:0;width:100%;justify-content:space-between}
  .glass{width:48px;height:68px}
  .hero-row{gap:14px}
  .fab span{display:none}
  .fab{padding:16px}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ---------- Sesión ---------- */
.userbar{display:flex;justify-content:flex-end;align-items:center;gap:8px;margin-top:10px;font-size:.82rem;color:var(--muted)}
.userbar #who{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
body.locked header.hero,body.locked nav.tabs,body.locked main,body.locked .fab{visibility:hidden}
.login{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:16px;background:
  radial-gradient(1200px 600px at 10% -10%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 60%),
  radial-gradient(900px 500px at 110% 110%,color-mix(in srgb,var(--w-generoso) 18%,transparent),transparent 60%),var(--bg);animation:fade .4s both}
.login[hidden]{display:none!important}
.card-login{width:100%;max-width:380px;background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:28px 24px 22px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:14px;animation:up .6s cubic-bezier(.2,.8,.2,1) both}
.card-login h1{font-family:var(--f-display);font-weight:500;font-style:italic;font-size:2.6rem;line-height:1;margin:0;text-align:center}
.card-login h1 b{font-style:normal;font-weight:700;color:var(--accent)}
.card-login .tag{text-align:center;color:var(--muted);margin:-6px 0 6px}
.card-login .btn.primary{justify-content:center;padding:12px;font-size:1rem;margin-top:4px}
.big-glass{display:block;margin:0 auto;width:64px;height:90px}
.big-glass .pour{animation:pour 2.4s cubic-bezier(.2,.8,.2,1) both}
@keyframes pour{from{transform:translateY(64px)}to{transform:translateY(18px)}}
.l-msg{margin:0;min-height:1.2em;text-align:center;color:var(--danger);font-size:.88rem;font-weight:600}
.shake{animation:shake .4s}
@keyframes shake{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}