@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Pacifico&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&display=swap');
:root{font-family:system-ui,-apple-system,Segoe UI,sans-serif;color:#193e59;background:#fff8df}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 100% 0%,#ffe48c 0,transparent 42%),radial-gradient(circle at 0% 85%,#e4f0b5 0,transparent 42%),#fff8df}.app{max-width:460px;margin:auto;padding:18px 16px 36px}header{text-align:center;font-size:23px;font-weight:850;letter-spacing:.12em;margin:7px 0 20px;color:#174e87}input{width:100%;border:2px solid #f2d68c;background:#fffef6;border-radius:16px;padding:14px 16px;font-size:13px;color:#193e59;outline-color:#1568b7;box-shadow:0 4px 0 #e8c85a33}input::placeholder{color:#8b8b78}section{margin-top:23px}.heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px}h2{font-size:14px;font-weight:800;margin:0;color:#193e59}button{cursor:pointer;font:inherit;border:0;background:transparent;color:#155da4}button:focus-visible,a:focus-visible{outline:3px solid #1268b5;outline-offset:2px}.heading button{font-size:11px;font-weight:750}.favorites{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.fav{display:block;background:#ffe4a0;border:1px solid #e8b95c;border-radius:12px;color:#674113;padding:12px 10px;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px;font-weight:650;box-shadow:0 3px 0 #e6b75d33}.fav:nth-child(4n+2){background:#dbeea8;border-color:#b4ce6b;color:#355a25}.fav:nth-child(4n+3){background:#dbeafa;border-color:#b4cde8;color:#1a5182}.fav:nth-child(4n+4){background:#ffcfad;border-color:#e7a77d;color:#88441c}.categories{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.category{min-height:103px;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;color:#183c55;font-size:10px;font-weight:750;border:2px solid #ffffffaa;box-shadow:0 3px 0 #9a77321c;transition:transform .15s,box-shadow .15s}.category:active{transform:translateY(2px);box-shadow:none}.category svg{width:43px;height:43px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}.category.active{border-color:#174e87;box-shadow:0 0 0 2px #174e8733}.place{background:#fffdf3;border:1px solid #ecd79e;border-radius:14px;margin:8px 0;padding:13px;display:flex;align-items:center;gap:9px;box-shadow:0 2px 0 #e6bc6b22}.place .name{flex:1;min-width:0;font-weight:700}.place small{display:block;color:#6f8377;font-weight:400;margin-top:3px}.place a{color:#1463ac;text-decoration:none;font-size:12px;font-weight:750}.star{font-size:20px;color:#ec8a1d}.empty{color:#687d76;font-size:13px}@media(max-width:340px){.categories{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Navegación compacta: íconos a la izquierda, contenido a la derecha */
.app{max-width:580px;padding:16px 12px 32px}.workspace{display:grid;grid-template-columns:64px minmax(0,1fr);gap:13px;align-items:start;margin-top:22px}.sidebar{position:sticky;top:12px}.mainpanel{min-width:0}.mainpanel section{margin-top:0}.categories{display:flex;flex-direction:column;gap:8px}.category{width:60px;min-height:58px;height:58px;padding:7px;border-radius:15px;background:var(--tile)!important;gap:0;font-size:0;box-shadow:0 2px 0 #9a77321c}.category svg{width:37px;height:37px;flex-shrink:0}.category.active{border-color:#174e87;box-shadow:0 0 0 2px #174e8733}.favorites{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.fav{min-height:66px;display:flex;align-items:center;white-space:normal;line-height:1.25;font-size:12px;padding:10px}.heading{min-height:28px;margin-bottom:10px}.heading h2{font-size:15px}.place{flex-wrap:wrap;padding:10px;gap:7px}.place .name{font-size:12px}.place a{font-size:11px}@media(max-width:380px){.workspace{grid-template-columns:54px minmax(0,1fr);gap:9px}.category{width:52px;height:54px;min-height:54px}.category svg{width:33px;height:33px}.favorites{grid-template-columns:1fr}.fav{min-height:51px}}

/* Ajuste fino móvil: más categorías visibles sin reducir demasiado los íconos */
.workspace{grid-template-columns:58px minmax(0,1fr);gap:11px}.categories{gap:5px}.category{width:56px;height:52px;min-height:52px;padding:6px;border-radius:13px}.category svg{width:33px;height:33px}@media(max-width:380px){.workspace{grid-template-columns:51px minmax(0,1fr);gap:8px}.categories{gap:5px}.category{width:49px;height:49px;min-height:49px}.category svg{width:30px;height:30px}}

/* Tipografía más cálida y amable para la interfaz móvil */
:root{font-family:'Nunito',system-ui,-apple-system,sans-serif}header{font-weight:800;letter-spacing:.055em}h2{font-weight:800}.heading button{font-weight:700}.fav{font-weight:700}.place .name{font-weight:800}input,button{font-family:inherit}

/* Título con personalidad, conservando legibilidad en el resto */
header{font-family:'Pacifico',cursive;font-size:32px;font-weight:400;letter-spacing:0;text-transform:none;line-height:1.45;margin:4px 0 17px;color:#174e87}

/* Título Casa Martell en Playfair Display */
header{font-family:'Playfair Display',Georgia,serif;font-size:31px;font-weight:600;font-style:normal;letter-spacing:-.025em;line-height:1.35}

/* Tarjetas completas clickeables y arrastre de categorías */
.place{cursor:pointer;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.place.dragging{border:2px dashed #1766a3;background:#e5f2ff;opacity:.75;transform:scale(.98)}
.category{touch-action:manipulation}
#move-notice{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:1000;background:#174e87;color:white;padding:10px 15px;border-radius:12px;box-shadow:0 4px 16px #0003;font-size:13px;text-align:center;max-width:90vw;pointer-events:none}
#move-notice[hidden]{display:none}

.version-status{max-width:580px;margin:0 auto 20px;padding:0 12px;text-align:center;color:#6e7e80;font:600 11px 'Nunito',sans-serif}
.version-status.outdated{color:#a65d12;font-weight:800}

.place{touch-action:none}
.category.drop-target{outline:3px solid #174e87;outline-offset:2px}

/* Deslizar hacia la izquierda revela la papelera de la dirección */
.place{position:relative;overflow:hidden}
.place .delete-place{display:none;align-items:center;justify-content:center;width:42px;height:42px;border-radius:10px;background:#f9d9d5;color:#a63f38;flex-shrink:0}
.place.swiped .delete-place{display:flex}
.place .delete-place svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* CASA MARTELL · iOS-inspired premium mobile design */
:root{font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Nunito',sans-serif;color:#282522;background:#f5f3ef}
html{-webkit-tap-highlight-color:transparent}
body{background:linear-gradient(155deg,#faf8f5 0%,#f1eee9 62%,#f7f4ef 100%);color:#282522}
.app{max-width:580px;padding:calc(22px + env(safe-area-inset-top,0px)) 17px 38px}
header{font-family:'Playfair Display',Georgia,serif;font-size:31px;font-weight:600;letter-spacing:-.045em;color:#382f29;margin:2px 0 24px;gap:12px;text-align:left}
#search{font-family:inherit;font-size:15px;line-height:1.3;background:#ffffffd9;border:1px solid #e9e4dd;border-radius:18px;padding:15px 17px;color:#332e29;box-shadow:0 5px 20px #4d3c2610,0 1px 2px #4d3c2608;outline:none;transition:border-color .2s,box-shadow .2s}
#search:focus{border-color:#b7a08d;box-shadow:0 0 0 4px #b7a08d24,0 5px 20px #4d3c2610}
#search::placeholder{color:#a19a93}
.workspace{grid-template-columns:58px minmax(0,1fr);gap:13px;margin-top:24px}
.sidebar{top:14px}
.categories{gap:8px}
.category{width:56px;height:54px;min-height:54px;border:1px solid #ffffffa8;border-radius:17px;background:color-mix(in srgb,var(--tile) 55%,white)!important;color:#51483f;box-shadow:0 3px 12px #4c3e2e0b,inset 0 1px #ffffffcc;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.category svg{width:30px;height:30px;stroke-width:1.65}
.category.active{background:var(--tile)!important;border-color:#9c7d67;box-shadow:0 0 0 2px #b8a18c3b,0 6px 16px #5b453022;transform:scale(1.035)}
.category.drop-target{outline:3px solid #b18e71;outline-offset:2px}
.heading{margin-bottom:14px;min-height:29px;gap:8px}
.heading h2{font-size:18px;font-weight:750;letter-spacing:-.035em;color:#342e29}
.heading button{font-size:12px;font-weight:650;color:#92725d;background:#eee8e1;padding:8px 10px;border-radius:11px}
.favorites{gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
.fav,.fav:nth-child(4n+2),.fav:nth-child(4n+3),.fav:nth-child(4n+4){background:#fffdfa;color:#42392f;border:1px solid #ebe5dc;border-radius:17px;box-shadow:0 5px 16px #54412d0c,0 1px 3px #54412d09;font-size:13px;font-weight:650;line-height:1.35;min-height:79px;padding:14px;transition:transform .15s,background .15s}
.fav:active{background:#f1ebe4;transform:scale(.985)}
.place{background:#fffdfa;border:1px solid #ebe6df;border-radius:17px;padding:13px 12px;margin:9px 0;gap:9px;box-shadow:0 5px 18px #4b38270c,0 1px 2px #4b382708;transition:box-shadow .18s,background .18s}
.place:active{background:#f7f3ee}
.place .name{font-size:13px;font-weight:700;letter-spacing:-.012em;color:#342e29;line-height:1.35}
.place small{font-size:10px;color:#958b81;margin-top:5px;font-weight:550}
.place a{font-size:11px;font-weight:650;color:#8d705b;background:#f4eee8;border-radius:9px;padding:7px 8px}
.star{font-size:23px;color:#c39a68;line-height:1;padding:5px}
.place.dragging{background:#f0e6db;border:1px dashed #a98b72;opacity:.85}
.place .delete-place{background:#fce9e6;color:#b84d48;border-radius:12px}
.version-status{color:#a49a91;font-family:inherit;font-size:11px;font-weight:550;padding-bottom:env(safe-area-inset-bottom,0px)}
#move-notice{background:#39332e;color:#fff9f2;border-radius:15px;box-shadow:0 10px 32px #2e251e36;padding:12px 16px}
#logout{font-family:inherit;background:#eee8e1;color:#806955;border:1px solid #e6dcd1;border-radius:12px;font-size:11px;font-weight:650;padding:9px 11px;box-shadow:none}
button:focus-visible,a:focus-visible{outline:3px solid #bca38e;outline-offset:2px}
@media(max-width:380px){.app{padding-left:12px;padding-right:12px}.workspace{grid-template-columns:51px minmax(0,1fr);gap:9px}.category{width:49px;height:50px;min-height:50px;border-radius:15px}.category svg{width:27px;height:27px}.favorites{grid-template-columns:1fr}.fav,.fav:nth-child(4n+2),.fav:nth-child(4n+3),.fav:nth-child(4n+4){min-height:58px}}
@media(prefers-reduced-motion:reduce){.category,.fav,.place{transition:none}}

/* Fondo premium: veladuras pastel translúcidas, sin distraer del contenido */
html{background:#f7f5f2}
body{background:
 radial-gradient(ellipse 75% 42% at 5% 7%,rgba(234,202,190,.36),transparent 78%),
 radial-gradient(ellipse 72% 43% at 100% 24%,rgba(205,215,232,.34),transparent 77%),
 radial-gradient(ellipse 80% 50% at 8% 70%,rgba(215,224,198,.32),transparent 78%),
 radial-gradient(ellipse 72% 44% at 96% 94%,rgba(236,215,196,.38),transparent 78%),
 linear-gradient(160deg,#faf8f5,#f5f3f1 55%,#f9f7f3);
 background-attachment:fixed}

/* Apple HIG-inspired refinement: material layers, hierarchy, touch feedback */
:root{color-scheme:light}
body{font-feature-settings:"kern";-webkit-font-smoothing:antialiased}
.app{padding-top:calc(28px + env(safe-area-inset-top,0px))}
header{font-size:34px;line-height:1.18;margin-bottom:22px}
#search{min-height:51px;background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.83);-webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%);box-shadow:0 8px 30px #5b493b10,inset 0 1px #fff9}
.workspace{margin-top:27px}
.category{border:1px solid #ffffffd1;background:color-mix(in srgb,var(--tile) 32%,rgba(255,255,255,.85))!important;-webkit-backdrop-filter:blur(16px) saturate(130%);backdrop-filter:blur(16px) saturate(130%);box-shadow:0 5px 18px #57443112,inset 0 1px #fffd}
.category.active{background:color-mix(in srgb,var(--tile) 65%,white)!important;border-color:#ac9785;box-shadow:0 0 0 2px #bba48e45,0 7px 19px #5b45301b}
.heading h2{font-size:19px;letter-spacing:-.04em}
.heading button{min-height:35px;background:rgba(255,255,255,.54);border:1px solid #ffffffb3;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.fav,.fav:nth-child(4n+2),.fav:nth-child(4n+3),.fav:nth-child(4n+4){background:rgba(255,255,255,.66);border:1px solid rgba(255,255,255,.94);-webkit-backdrop-filter:blur(22px) saturate(135%);backdrop-filter:blur(22px) saturate(135%);box-shadow:0 8px 25px #55433112,inset 0 1px #fff}
.place{background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.95);-webkit-backdrop-filter:blur(18px) saturate(130%);backdrop-filter:blur(18px) saturate(130%);box-shadow:0 6px 24px #55433110,inset 0 1px #fff}
.place .name{font-size:14px}
.place a{min-height:34px;display:inline-flex;align-items:center;background:rgba(237,230,221,.65)}
.star{min-width:38px;min-height:38px}
.category:active,.fav:active{transform:scale(.96)}
.place:active{background:rgba(248,244,239,.9)}
#auth-gate{background:radial-gradient(ellipse at 0 10%,#ead3ca88,transparent 60%),radial-gradient(ellipse at 100% 85%,#d7e0d088,transparent 60%),#f6f3ef}
#auth-form{background:rgba(255,255,255,.74);-webkit-backdrop-filter:blur(25px) saturate(145%);backdrop-filter:blur(25px) saturate(145%)}
@media(prefers-reduced-transparency:reduce){#search,.category,.fav,.place{background:#fffdfa!important;-webkit-backdrop-filter:none;backdrop-filter:none}}

/* Apple-inspired visual palette and iconography only; layout and behavior unchanged */
:root{color:#1d1d1f;background:#f5f5f7}
html{background:#f5f5f7}
body{color:#1d1d1f;background:
radial-gradient(ellipse 72% 38% at 0% 8%,rgba(186,211,255,.42),transparent 80%),
radial-gradient(ellipse 65% 38% at 100% 28%,rgba(235,203,255,.36),transparent 82%),
radial-gradient(ellipse 80% 42% at 12% 74%,rgba(191,237,228,.32),transparent 80%),
radial-gradient(ellipse 75% 38% at 100% 95%,rgba(255,219,195,.31),transparent 80%),
#f5f5f7;background-attachment:fixed}
header{color:#1d1d1f}
#search{color:#1d1d1f;border-color:#ffffffd9;background:rgba(255,255,255,.76)}
#search:focus{border-color:#007aff;box-shadow:0 0 0 4px #007aff20,0 8px 30px #30304a10}
#search::placeholder{color:#8e8e93}
.heading h2{color:#1d1d1f}
.heading button{color:#007aff;background:#ffffffad}
.category{color:#303642;border-color:#ffffffde!important;background:rgba(255,255,255,.73)!important;box-shadow:0 4px 16px #33385c13,inset 0 1px #fff}
.category:nth-child(6n+1){color:#007aff;background:rgba(218,234,255,.82)!important}
.category:nth-child(6n+2){color:#30a46c;background:rgba(218,247,229,.82)!important}
.category:nth-child(6n+3){color:#8e5ad7;background:rgba(236,225,255,.82)!important}
.category:nth-child(6n+4){color:#ff9500;background:rgba(255,238,213,.84)!important}
.category:nth-child(6n+5){color:#ed6a85;background:rgba(255,227,235,.84)!important}
.category:nth-child(6n+6){color:#16a3b2;background:rgba(219,245,247,.84)!important}
.category svg{stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.category.active{border-color:#007aff!important;box-shadow:0 0 0 2px #007aff40,0 5px 20px #007aff1b}
.category.drop-target{outline-color:#007aff}
.fav,.fav:nth-child(4n+2),.fav:nth-child(4n+3),.fav:nth-child(4n+4){color:#242428;background:rgba(255,255,255,.8);border-color:#ffffffeb;box-shadow:0 6px 22px #3d416012}
.place{color:#1d1d1f;background:rgba(255,255,255,.82);border-color:#ffffffed;box-shadow:0 6px 22px #3d41600f}
.place .name{color:#1d1d1f}
.place small{color:#8e8e93}
.place a{color:#007aff;background:#eaf2ff}
.star{color:#ffb02e}
.place.dragging{background:#eaf2ff;border-color:#007aff}
.place .delete-place{background:#ffe7e7;color:#ff3b30}
#logout{background:#ffffffb5;color:#007aff;border-color:#ffffffd9}
#move-notice{background:#2c2c2e;color:#fff}
.version-status{color:#8e8e93}
button:focus-visible,a:focus-visible{outline-color:#007aff}
#auth-gate{background:radial-gradient(ellipse at 0 10%,#c7ddff99,transparent 60%),radial-gradient(ellipse at 100% 85%,#dfd2ff99,transparent 60%),#f5f5f7}
#auth-form{border-color:#ffffffeb;background:#ffffffc7}
#auth-form h1{color:#1d1d1f}
#auth-pin{color:#1d1d1f;border-color:#e5e5ea;background:#f9f9fb}
#auth-pin:focus{border-color:#007aff;outline-color:#007aff35}
#auth-form button{background:#007aff;box-shadow:0 6px 18px #007aff30}
#auth-form button:active{background:#0063cf}

/* Horizontal swipe works while vertical page scrolling remains native */
.place{touch-action:pan-y;overscroll-behavior-x:contain}
.place.swiped{border-color:#ffc8c8;box-shadow:0 4px 18px #d9484815}
.place.swiped .delete-place{display:inline-flex;animation:trash-reveal .18s ease-out}
@keyframes trash-reveal{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:translateX(0)}}

/* Fondo iPhone: auroras pastel vivas y mezcladas, sin modificar tarjetas ni controles */
html{background:#f5f0ff}
body{
 background:
 radial-gradient(ellipse 88% 46% at -12% 0%,rgba(134,179,255,.65) 0%,rgba(174,205,255,.30) 55%,transparent 85%),
 radial-gradient(ellipse 75% 48% at 112% 17%,rgba(230,163,255,.57) 0%,rgba(242,197,255,.27) 58%,transparent 86%),
 radial-gradient(ellipse 88% 43% at -12% 43%,rgba(142,229,218,.53) 0%,rgba(192,244,222,.25) 57%,transparent 85%),
 radial-gradient(ellipse 85% 50% at 110% 67%,rgba(255,191,170,.59) 0%,rgba(255,221,192,.30) 58%,transparent 88%),
 radial-gradient(ellipse 82% 40% at 8% 100%,rgba(177,176,255,.52) 0%,rgba(212,204,255,.27) 58%,transparent 86%),
 linear-gradient(155deg,#f0f5ff 0%,#faf1ff 33%,#f0faf8 65%,#fff2ee 100%);
 background-attachment:fixed;
}