/* =====================================================
   VIAJE VERANO 2026 · APP.CSS CLEAN PREMIUM
   Sustituir completo css/app.css por este archivo
   Línea visual: acuarela editorial + tinta azul + papel cálido
===================================================== */

:root{
  --ink:#163745;
  --ink-soft:#254f5e;
  --ocean:#0f5b73;
  --ocean-2:#257f93;
  --aqua:#58b6c4;
  --cream:#f8ecd8;
  --paper:#fff4df;
  --paper-2:#f2dfbf;
  --sand:#d9b777;
  --gold:#b98131;
  --danger:#b94747;
  --ok:#3d8b63;
  --muted:#6d7678;
  --line:rgba(22,55,69,.16);
  --darkGlass:rgba(15,55,70,.58);
  --darkGlass2:rgba(15,55,70,.72);
  --card:linear-gradient(145deg,rgba(255,244,223,.94),rgba(242,223,191,.88));
  --card-strong:linear-gradient(145deg,rgba(255,239,204,.97),rgba(238,211,165,.91));
  --shadow:0 16px 42px rgba(22,55,69,.16);
  --shadow-soft:0 10px 26px rgba(22,55,69,.11);
  --shadow-nav:0 18px 52px rgba(22,55,69,.26);
  --radius:24px;
  --radius-lg:32px;
  --font-title:"Playfair Display", Georgia, serif;
  --font-hand:"Caveat", cursive;
  --font-base:"Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{min-height:100%;scroll-behavior:smooth}
body{
  min-height:100vh;
  font-family:var(--font-base);
  color:var(--ink);
  overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;
  background:
    linear-gradient(180deg,rgba(9,44,58,.10),rgba(248,236,216,.36)),
    url("../assets/bg/hero-viaje.jpg") center top / cover no-repeat fixed;
}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
.hidden{display:none!important}
.app-shell{min-height:100vh;padding-bottom:112px}

/* =====================================================
   VIEWS / MAIN
===================================================== */
.main-content{
  width:min(1120px,calc(100vw - 32px));
  margin:24px auto 0;
  padding-bottom:18px;
}
.view{display:none;animation:fadeIn .22s ease}
.view.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.section-title{
  display:flex;
  align-items:center;
  gap:14px;
  margin:0 0 18px;
}
.section-title>span{
  width:54px;height:54px;flex:0 0 54px;
  display:grid;place-items:center;
  border-radius:18px;
  background:var(--card-strong);
  color:var(--ink);
  border:1px solid var(--line);
  box-shadow:var(--shadow-soft);
  font-size:1.55rem;
}
.section-title h2{
  font-family:var(--font-title);
  color:var(--ink);
  font-size:clamp(2rem,4vw,3rem);
  line-height:.95;
  letter-spacing:-.03em;
}
.section-title p{color:var(--muted);font-size:.98rem;margin-top:4px}

/* =====================================================
   HERO
===================================================== */
.hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:340px;
  padding:28px 24px 24px;
  color:var(--paper);
  background:#103848;
  border-radius:0 0 34px 34px;
  box-shadow:0 18px 48px rgba(9,44,58,.24);
}
.hero-bg-image{
  position:absolute;inset:0;z-index:-3;
  background:url("../assets/bg/hero-viaje.jpg") center top / cover no-repeat;
  filter:saturate(1.03) contrast(1.08) brightness(.78);
}
.hero-overlay{
  position:absolute;inset:0;z-index:-2;
  background:
    linear-gradient(90deg,rgba(10,43,56,.86),rgba(10,43,56,.44) 46%,rgba(10,43,56,.18)),
    linear-gradient(180deg,rgba(10,43,56,.18),rgba(10,43,56,.64));
}
.hero-wave{display:none}
.hero-content{max-width:1120px;margin:0 auto}
.hero-top{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:22px}
.eyebrow{
  color:var(--paper);
  font-size:.83rem;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-shadow:0 3px 12px rgba(0,0,0,.32);
}
.hero h1{
  margin-top:6px;
  font-family:var(--font-title);
  color:var(--paper);
  font-size:clamp(3rem,7vw,5.8rem);
  line-height:.88;
  letter-spacing:-.045em;
  text-shadow:0 10px 32px rgba(0,0,0,.34);
}
.subtitle{
  font-family:var(--font-hand);
  color:var(--paper);
  font-size:1.35rem;
  line-height:1.08;
  text-shadow:0 4px 12px rgba(0,0,0,.30);
}
.install-btn{
  flex:0 0 auto;
  border:1px solid rgba(255,244,223,.38);
  background:rgba(15,55,70,.38);
  color:var(--paper);
  padding:11px 16px;
  border-radius:17px;
  font-weight:900;
  backdrop-filter:blur(12px);
  box-shadow:0 12px 28px rgba(0,0,0,.16);
}
.dashboard-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}
.dash-card,.smart-rec-card{
  background:var(--darkGlass);
  border:1px solid rgba(255,244,223,.24);
  border-radius:24px;
  color:var(--paper);
  box-shadow:0 16px 36px rgba(0,0,0,.18);
  backdrop-filter:blur(14px) saturate(115%);
}
.dash-card{min-height:96px;padding:15px 16px}
.sketch-icon{display:block;font-size:1.45rem;margin-bottom:5px}
.dash-card p{font-size:.73rem;font-weight:900;color:rgba(255,244,223,.82)}
.dash-card strong{display:block;margin-top:2px;font-size:1.04rem;font-weight:900;color:var(--paper)}
.dash-card small{display:block;margin-top:4px;color:rgba(255,244,223,.76);font-size:.72rem}
.smart-recommendation{margin-top:14px}
.smart-rec-card{display:flex;align-items:center;gap:14px;padding:14px 16px}
.smart-rec-icon{
  width:54px;height:54px;flex:0 0 54px;
  display:grid;place-items:center;
  border-radius:19px;
  background:rgba(255,244,223,.16);
  font-size:1.65rem;
}
.smart-rec-label{font-size:.72rem;font-weight:900;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,244,223,.78)}
.smart-rec-content h3{font-family:var(--font-title);font-size:1.14rem;color:var(--paper);line-height:1.05}
.smart-rec-content span{display:block;margin-top:2px;color:rgba(255,244,223,.86);font-size:.88rem}

/* =====================================================
   CARDS / BUTTONS
===================================================== */
.today-card,.weather-panel,.note-card,.info-card,.upload-box,.lock-card,.more-card,.route-timeline-card,.hotel-card-pro,.food-card-premium,.food-zone-title,.document-group-title,.chat-avatar-picker{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  color:var(--ink);
}
.today-card,.weather-panel{position:relative;padding:22px 24px;margin-bottom:16px;overflow:hidden}
.today-card::after,.weather-panel::after,.note-card::after,.hotel-card-pro::after,.food-card-premium::after{
  content:"";position:absolute;inset:1px;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55);
}
.label{
  color:#7b663f;
  font-size:.75rem;
  font-weight:900;
  letter-spacing:.13em;
  text-transform:uppercase;
  margin-bottom:7px;
}
.today-card h3,.weather-panel h3,.note-card h4,.info-card h3,.lock-card h3,.more-card h3,.hotel-title h3,.food-info h3,.timeline-top h3{
  font-family:var(--font-title);
  color:var(--ink);
  letter-spacing:-.02em;
}
.today-card h3{font-size:1.38rem}.today-card p,.weather-panel p,.note-card p,.info-card p{color:#4f6269;line-height:1.45}
.big-doodle{position:absolute;right:22px;bottom:12px;font-size:4.6rem;opacity:.075}

.quick-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:18px 0}
.quick-actions button,.weather-actions button,.day-tab,.map-link,.timeline-open,.back-more-btn,.small-btn,.booking-actions button,.add-flex-btn,.hotel-actions button,.food-links a,.hotel-link{
  min-height:42px;
  border-radius:16px;
  border:1px solid var(--line);
  background:linear-gradient(145deg,rgba(255,244,223,.96),rgba(240,219,184,.92));
  color:var(--ink);
  font-weight:900;
  box-shadow:0 8px 18px rgba(22,55,69,.10);
}
.quick-actions button:active,.weather-actions button:active,.day-tab:active,.map-link:active,.timeline-open:active,.back-more-btn:active,.small-btn:active,.booking-actions button:active,.add-flex-btn:active{transform:scale(.97)}
.home-smart-card{
  text-align:left!important;
  min-height:108px!important;
  padding:17px!important;
  display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:space-between!important;
  position:relative;overflow:hidden;
}
.home-smart-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:linear-gradient(180deg,var(--ocean),var(--gold))}
.home-smart-card strong{font-size:.8rem;color:var(--ocean);font-weight:900}
.home-smart-card span{font-size:1.08rem;color:var(--ink);font-weight:900;line-height:1.08}
.home-smart-card small{font-size:.73rem;color:var(--muted);line-height:1.25}

.weather-actions,.meta-line,.food-tags,.booking-actions,.timeline-actions,.route-steps{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.pill,.food-tags span{
  display:inline-flex;align-items:center;min-height:29px;padding:6px 11px;border-radius:999px;
  background:rgba(15,91,115,.10);color:var(--ocean);font-size:.76rem;font-weight:900;
}

/* =====================================================
   DÍAS / RUTA
===================================================== */
.days-tabs{
  display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;
  margin:0 0 18px;padding:10px;
  background:rgba(22,55,69,.10);
  border:1px solid rgba(22,55,69,.12);
  border-radius:24px;
}
.days-tabs::-webkit-scrollbar{display:none}
.day-tab{flex:0 0 auto;min-width:92px;height:52px;padding:0 15px;font-size:1rem}
.day-tab.active{background:linear-gradient(135deg,var(--ink),var(--ocean));color:var(--paper);border:none;box-shadow:0 12px 26px rgba(22,55,69,.24)}
.day-head{padding:22px 24px;margin-bottom:18px;position:relative}
.day-date,.timeline-day{color:#7b663f;font-size:.76rem;font-weight:900;text-transform:uppercase;letter-spacing:.11em}
.day-head h3{font-size:clamp(1.55rem,3.5vw,2.2rem);line-height:1.02;margin-top:4px}
.day-head p{color:#4f6269;margin-top:4px}
.day-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.note-card{position:relative;padding:20px;min-height:138px;overflow:hidden}
.note-card h4{font-size:1.12rem;color:var(--ink)}
.note-card ul{list-style:none;display:grid;gap:7px;margin-top:10px}
.note-card li{position:relative;padding-left:20px;line-height:1.42;color:#3e535b}
.note-card li::before{content:"✦";position:absolute;left:0;color:var(--ocean-2)}
.day-section-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}
.day-section-head button,.edit-plan-btn,.edit-mustsee-btn,.edit-curiosities-btn,.edit-tips-btn,.edit-alerts-btn,.edit-route-btn,.edit-food-btn,.edit-rainplan-btn,.add-flex-btn,.map-link,.timeline-open{
  background:linear-gradient(135deg,var(--ink),var(--ocean))!important;color:var(--paper)!important;border:none!important;box-shadow:0 10px 22px rgba(22,55,69,.22)!important;
}
.day-section-head button,.edit-plan-btn{min-height:42px;padding:0 15px;border-radius:15px;font-size:.86rem;white-space:nowrap}
.empty-day-section{color:#5c6970!important;font-style:normal!important;line-height:1.45}
.day-items{display:grid;gap:10px;margin-top:8px}.day-item{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:12px;border-radius:16px;background:rgba(255,250,241,.58);border:1px solid rgba(22,55,69,.10)}
.day-item-main{display:flex;flex-direction:column}.day-item-main small{margin-top:3px;color:var(--muted)}.mini-action{font-size:1.2rem}

.route-list{display:grid;gap:16px}.route-timeline-card{display:grid;grid-template-columns:64px 1fr;gap:14px;padding:20px}.timeline-left{display:flex;flex-direction:column;align-items:center}.timeline-dot{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--ink),var(--ocean));color:var(--paper);box-shadow:var(--shadow-soft)}.timeline-line{flex:1;width:3px;margin-top:9px;background:repeating-linear-gradient(to bottom,rgba(22,55,69,.28),rgba(22,55,69,.28) 8px,transparent 8px,transparent 15px)}.timeline-top{display:flex;justify-content:space-between;gap:10px}.timeline-top h3{font-size:1.32rem}.timeline-km{font-weight:900;color:var(--ocean);white-space:nowrap}.timeline-mood{color:#52656c;margin-top:10px}

/* =====================================================
   FORMS / MODALS
===================================================== */
.comic-form,.booking-form,.photo-upload-form{display:grid;gap:10px;margin-bottom:16px}.booking-form{grid-template-columns:repeat(3,1fr);background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
input,select,textarea,.comic-form input,.comic-form select,.booking-form input,.booking-form select,.upload-box input,.upload-box select,.chat-form input,.chat-form select{
  min-height:45px;padding:11px 13px;border-radius:15px;border:1px solid rgba(22,55,69,.16);background:rgba(255,250,241,.86);color:var(--ink);outline:none;
}
input:focus,select:focus,textarea:focus{border-color:rgba(37,127,147,.55);box-shadow:0 0 0 4px rgba(88,182,196,.14)}
.comic-form button,.booking-form button,.upload-box button,.chat-form>button{min-height:46px;border-radius:16px;border:none;color:var(--paper);background:linear-gradient(135deg,var(--ink),var(--ocean));font-weight:900}.booking-form button{grid-column:1/-1}

.setup-modal,.edit-modal{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;padding:18px;overflow-y:auto;background:rgba(10,43,56,.36);backdrop-filter:blur(10px)}
.setup-card,.edit-modal-card{width:min(560px,calc(100vw - 28px));max-height:calc(100vh - 32px);overflow-y:auto;background:var(--card);border:1px solid rgba(255,244,223,.58);border-radius:30px;box-shadow:0 28px 84px rgba(10,43,56,.34);padding:22px}.setup-header,.edit-modal-head{text-align:center;margin-bottom:16px}.setup-icon,.edit-modal-icon{display:block;font-size:2rem;margin-bottom:5px}.setup-header h2,.edit-modal-head h2{font-family:var(--font-title);color:var(--ink);font-size:1.55rem}.setup-header p,.edit-modal-head p{color:var(--muted);font-size:.9rem}.setup-form,.edit-modal-form,#editModalFields{display:grid;gap:11px}.setup-group,.edit-field{display:grid;gap:5px}.setup-group label,.edit-field label{color:var(--ink);font-size:.8rem;font-weight:900}.setup-dates{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center}.families-container,.people-container{display:grid;gap:7px}.family-input-row,.person-input-row{display:grid;grid-template-columns:1fr auto;gap:8px}.remove-family-btn,.remove-person-btn,.edit-modal-close{width:36px;height:36px;border-radius:50%;border:1px solid rgba(185,71,71,.18);background:rgba(255,250,241,.70);color:var(--danger);font-weight:900}.add-family-btn,.add-person-btn{min-height:38px;border-radius:15px;border:1.5px dashed rgba(22,55,69,.22);background:rgba(255,250,241,.45);color:var(--ink);font-weight:900}.setup-submit,.setup-cancel,.edit-modal-cancel,.edit-modal-save{min-height:50px;border-radius:18px;font-weight:900}.setup-submit,.edit-modal-save{border:none;background:linear-gradient(135deg,var(--ink),var(--ocean));color:var(--paper);box-shadow:0 12px 26px rgba(22,55,69,.24)}.setup-cancel,.edit-modal-cancel{border:1px solid var(--line);background:rgba(255,250,241,.62);color:var(--ink)}.setup-actions,.edit-modal-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.edit-modal-head{display:flex;justify-content:space-between;text-align:left;gap:14px}.edit-field textarea{min-height:96px;resize:vertical}
#setupModal:not(.hidden)~.hero,#setupModal:not(.hidden)~main,#setupModal:not(.hidden)~.bottom-nav,#setupModal:not(.hidden)~.chat-toast{display:none!important}
#setupModal{background:linear-gradient(90deg,rgba(10,43,56,.20),rgba(255,244,223,.18)),url("../assets/bg/hero-viaje.jpg") center / cover no-repeat fixed!important}

/* =====================================================
   HOTELS / FOOD
===================================================== */
.hotel-dashboard,.food-dashboard{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:22px}.food-dashboard{grid-template-columns:repeat(4,1fr)}
.hotel-dashboard article,.food-stat{background:var(--card-strong);border:1px solid var(--line);border-radius:22px;padding:16px;text-align:center;box-shadow:var(--shadow-soft)}.hotel-dashboard strong,.food-stat strong{display:block;font-family:var(--font-title);font-size:1.55rem;color:var(--ink)}.hotel-dashboard span,.food-stat span{display:block;margin-top:4px;color:var(--muted);font-weight:900;font-size:.76rem}
.hotel-card-pro,.food-card-premium{position:relative;padding:20px;margin-bottom:18px;overflow:hidden}.hotel-top,.food-header{display:flex;align-items:flex-start;gap:14px}.hotel-icon,.food-icon{width:60px;height:60px;flex:0 0 60px;border-radius:20px;display:grid;place-items:center;background:rgba(255,250,241,.72);border:1px solid var(--line);box-shadow:var(--shadow-soft);font-size:1.85rem}.hotel-title,.food-info{flex:1}.hotel-title h3,.food-info h3{font-size:1.22rem;line-height:1.08}.hotel-title p,.food-info small{display:block;margin-top:4px;color:var(--muted)}.hotel-fav,.food-favorite{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:rgba(255,250,241,.72);box-shadow:var(--shadow-soft);font-size:1.15rem}.hotel-fav.active,.food-favorite.active{background:#f7cf72}.hotel-pills,.hotel-links,.food-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:15px}.hotel-pills span{padding:6px 12px;border-radius:999px;background:rgba(15,91,115,.10);color:var(--ocean);font-size:.76rem;font-weight:900}.hotel-address,.food-type,.food-description{margin-top:14px;color:#50636b;line-height:1.5}.hotel-notes{margin-top:12px;padding:12px;border-radius:16px;background:rgba(255,250,241,.60);border:1px solid rgba(22,55,69,.10);color:#50636b}.hotel-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}.delete-hotel-btn,.delete-restaurant-btn{background:rgba(255,250,241,.70)!important;color:var(--danger)!important;border:1px solid rgba(185,71,71,.18)!important}.food-filter-wrap{display:grid;gap:10px;margin-bottom:14px}.food-price-filter,.food-tag-filter{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}.food-price-filter::-webkit-scrollbar,.food-tag-filter::-webkit-scrollbar{display:none}.food-price-filter button,.food-tag-filter button{flex:0 0 auto;padding:9px 13px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink);font-weight:900}.food-price-filter button.active,.food-tag-filter button.active{background:linear-gradient(135deg,var(--ink),var(--ocean));color:var(--paper)}.food-results-summary{margin:8px 0 14px;padding:12px 14px;border-radius:18px;background:var(--card);border:1px solid var(--line);color:var(--ink);font-weight:900;box-shadow:var(--shadow-soft)}.food-zone-block{display:grid;gap:12px;margin-bottom:18px}.food-zone-title{display:flex;align-items:center;gap:12px;padding:14px}.food-zone-title>span{width:44px;height:44px;display:grid;place-items:center;border-radius:15px;background:rgba(15,91,115,.10)}.food-zone-title h3{font-family:var(--font-title);color:var(--ink)}.food-zone-title p{color:var(--muted);font-size:.84rem}.card-list,.food-zone-list,.document-group-list,.pending-group-list{display:grid;gap:14px}

/* =====================================================
   EXPENSES / PHOTOS / CHAT / MORE
===================================================== */
.expense-summary,.family-balance-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:14px}.expense-summary article,.family-balance-grid article{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:15px;box-shadow:var(--shadow-soft)}.expense-summary p,.family-balance-grid p{color:#7b663f;font-size:.72rem;font-weight:900;text-transform:uppercase}.expense-summary strong,.family-balance-grid strong{display:block;color:var(--ink);font-size:1.18rem;margin-top:4px}.family-balance-grid h3{font-family:var(--font-hand);color:var(--ink);font-size:1.18rem}.expense-lock{display:flex;justify-content:center;padding:14px 0}.lock-card{max-width:430px;width:100%;text-align:center;padding:24px}.lock-icon{display:block;font-size:2.3rem;margin-bottom:8px}
.upload-box{text-align:center;padding:22px}.upload-box>span{display:block;font-size:2.5rem}.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}.photo-card{position:relative;background:var(--card);padding:9px 9px 13px;border-radius:18px;box-shadow:var(--shadow-soft);transform:rotate(var(--rot,-.3deg));border:1px solid var(--line)}.photo-card:nth-child(even){--rot:.3deg}.photo-card img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:13px}.photo-delete{position:absolute;top:12px;right:12px;width:30px;height:30px;border:none;border-radius:50%;background:rgba(22,55,69,.75);color:var(--paper)}.photo-day{margin-top:8px;color:#7b663f;font-size:.68rem;font-weight:900;text-transform:uppercase}.photo-person{color:var(--ocean);font-size:.72rem;font-weight:900}.photo-caption{font-family:var(--font-hand);font-size:1.08rem;color:var(--ink)}.empty-photos{text-align:center;padding:36px 12px;color:var(--muted)}
.chat-whatsapp-card{display:flex;align-items:center;justify-content:space-between;gap:12px;background:linear-gradient(145deg,#e7f4df,#cdeac8);border:1px solid rgba(44,113,55,.18);border-radius:22px;padding:15px;margin-bottom:12px;box-shadow:var(--shadow-soft)}.chat-whatsapp-card a{background:#25d366;color:#fff;padding:9px 14px;border-radius:999px;font-weight:900}.chat-participants-control{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}.small-btn.danger{color:var(--danger)}.chat-avatar-picker{overflow:hidden;margin-bottom:12px}.chat-avatar-picker summary{list-style:none;padding:14px;color:var(--ink);font-weight:900;display:flex;justify-content:space-between}.avatar-picker-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0 14px 14px}.chat-box{max-height:52vh;overflow-y:auto;padding:4px 2px 12px}.chat-row{display:flex;align-items:flex-end;gap:9px;margin-bottom:12px}.chat-row.me{flex-direction:row-reverse}.chat-avatar{width:40px;height:40px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--card);box-shadow:var(--shadow-soft)}.chat-message{max-width:78%;background:var(--card);border:1px solid var(--line);border-radius:19px 19px 19px 6px;padding:10px 12px;box-shadow:var(--shadow-soft)}.chat-row.me .chat-message{background:linear-gradient(145deg,#d9f0f3,#b7dfe6);border-radius:19px 19px 6px 19px}.chat-author{color:var(--ocean);font-size:.72rem;font-weight:900;margin-bottom:3px}.chat-footer{display:flex;justify-content:space-between;gap:10px;margin-top:5px}.chat-time{color:var(--muted);font-size:.68rem}.chat-form{position:sticky;bottom:92px;z-index:20;display:grid;grid-template-columns:145px 1fr 78px;gap:8px;padding:10px;border-radius:24px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow)}.chat-input-wrap{display:flex;align-items:center;background:rgba(255,250,241,.72);border-radius:999px;padding:0 6px;border:1px solid var(--line)}.chat-input-wrap input{border:none;background:transparent;box-shadow:none;flex:1}.chat-tool-btn{width:36px;height:36px;border:none;background:transparent}.emoji-panel{position:sticky;bottom:160px;display:flex;flex-wrap:wrap;gap:6px;padding:12px;background:var(--card);border-radius:18px;box-shadow:var(--shadow)}.emoji-panel button{width:38px;height:38px;border:none;border-radius:12px;background:rgba(255,250,241,.64);font-size:1.25rem}.chat-toast{position:fixed;left:50%;bottom:112px;z-index:9999;transform:translateX(-50%) translateY(14px);opacity:0;width:min(420px,calc(100vw - 26px));display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:22px;background:var(--card);box-shadow:var(--shadow);pointer-events:none;transition:.22s}.chat-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.checklist-items{display:grid;gap:8px;margin-top:10px}.checklist-item{display:flex;align-items:center;gap:10px;background:rgba(255,250,241,.55);border:1px solid rgba(22,55,69,.10);border-radius:14px;padding:9px 11px}.checklist-item input{width:20px;height:20px;accent-color:var(--ocean)}.checklist-item span{flex:1}.checklist-item.done span{text-decoration:line-through;opacity:.55}.more-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}.more-card{text-align:center;padding:18px}.more-icon{display:block;font-size:2rem;margin-bottom:7px}.document-group,.pending-group{display:grid;gap:10px;margin-bottom:16px}.document-group-title,.document-card-head,.top-card-head,.pending-card-head{display:flex;align-items:center;gap:12px}.document-card-head span,.top-icon,.pending-card-head span{width:42px;height:42px;display:grid;place-items:center;border-radius:14px;background:rgba(15,91,115,.10);font-size:1.35rem}.pending-card-pro.done{opacity:.62}

/* =====================================================
   BOTTOM NAV
===================================================== */
.bottom-nav{
  position:fixed;left:50%;bottom:10px;z-index:9998;transform:translateX(-50%);
  width:min(1120px,calc(100vw - 18px));
  display:grid;grid-template-columns:repeat(9,1fr);gap:4px;
  padding:8px;border-radius:28px;
  background:linear-gradient(145deg,rgba(255,244,223,.96),rgba(242,223,191,.94));
  border:1px solid rgba(22,55,69,.15);
  box-shadow:var(--shadow-nav);
  backdrop-filter:blur(14px);
}
.bottom-nav button{min-height:54px;border:none;border-radius:19px;background:transparent;color:#607079;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:.76rem;font-weight:900}.bottom-nav button span{font-size:.62rem}.bottom-nav button.active{background:linear-gradient(135deg,var(--ink),var(--ocean));color:var(--paper);box-shadow:0 10px 22px rgba(22,55,69,.24)}

/* =====================================================
   RESPONSIVE
===================================================== */
@media(max-width:900px){
  .hero{min-height:315px;padding:24px 18px 22px}.hero h1{font-size:3.6rem}.dashboard-grid{grid-template-columns:repeat(4,1fr)}.dash-card{min-height:86px;padding:13px}.main-content{width:calc(100vw - 26px)}.day-grid{grid-template-columns:repeat(2,1fr)}.quick-actions{grid-template-columns:repeat(4,1fr)}.hotel-dashboard{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:760px){
  .hero{min-height:auto;padding:22px 14px 18px;border-radius:0 0 28px 28px}.hero-top{flex-direction:column;margin-bottom:16px}.install-btn{display:none}.hero h1{font-size:2.55rem}.subtitle{font-size:1.18rem}.dashboard-grid{grid-template-columns:repeat(2,1fr);gap:10px}.dash-card{min-height:86px}.smart-rec-card{align-items:flex-start}.main-content{width:calc(100vw - 18px);margin-top:18px}.section-title>span{width:46px;height:46px;flex-basis:46px}.section-title h2{font-size:1.65rem}.quick-actions,.day-grid,.booking-form,.chat-form{grid-template-columns:1fr}.home-smart-card{min-height:86px!important}.hotel-dashboard,.food-dashboard,.expense-summary,.family-balance-grid{grid-template-columns:repeat(2,1fr)}.route-timeline-card{grid-template-columns:1fr}.timeline-left{flex-direction:row}.timeline-line{width:auto;height:3px;flex:1;margin:0 0 0 8px;background:repeating-linear-gradient(to right,rgba(22,55,69,.28),rgba(22,55,69,.28) 8px,transparent 8px,transparent 15px)}.bottom-nav{width:calc(100vw - 10px);bottom:5px;border-radius:22px;padding:5px;overflow-x:auto;display:flex}.bottom-nav button{flex:0 0 72px;min-height:46px;border-radius:15px;font-size:.66rem}.bottom-nav button span{font-size:.52rem}.photo-grid{grid-template-columns:repeat(2,1fr)}.more-grid{grid-template-columns:repeat(2,1fr)}.setup-modal,.edit-modal{align-items:flex-start;padding:10px}.setup-card,.edit-modal-card{width:calc(100vw - 20px);border-radius:24px;padding:16px}.setup-dates{grid-template-columns:1fr}.setup-actions,.edit-modal-actions{grid-template-columns:1fr}.avatar-picker-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:420px){
  .hero h1{font-size:2.15rem}.dashboard-grid{grid-template-columns:repeat(2,1fr)}.hotel-dashboard,.food-dashboard,.expense-summary,.family-balance-grid{grid-template-columns:1fr}.today-card,.weather-panel,.note-card,.day-head,.hotel-card-pro,.food-card-premium{padding:16px}.section-title{gap:10px}.section-title h2{font-size:1.45rem}.bottom-nav button{flex-basis:68px}
}

/* =====================================================
   VISUAL FINAL PRO · ACUARELA ELEGANTE
   Consolidación final sin tocar JS/HTML
===================================================== */

body{
  background:
    linear-gradient(180deg, rgba(12,43,55,.18) 0%, rgba(246,230,200,.40) 34%, rgba(244,224,188,.50) 100%),
    url("../assets/bg/hero-viaje.jpg") center top / cover no-repeat fixed !important;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(circle at 12% 18%, rgba(64,156,178,.24), transparent 28%),
    radial-gradient(circle at 84% 22%, rgba(196,137,62,.20), transparent 30%),
    linear-gradient(90deg, rgba(255,244,223,.18), rgba(255,244,223,.04), rgba(255,244,223,.20));
  mix-blend-mode:multiply;
}
:root{
  --ink:#123747;
  --ink-soft:#285566;
  --ocean:#0b556d;
  --ocean-2:#16788f;
  --aqua:#4fb3c3;
  --paper:#f8ead0;
  --paper-light:#fff5e4;
  --paper-deep:#efd3a3;
  --gold:#b8792d;
  --terracotta:#a9623c;
  --line:rgba(18,55,71,.18);
  --card:linear-gradient(145deg, rgba(255,245,228,.94), rgba(239,211,163,.90));
  --card-strong:linear-gradient(145deg, rgba(255,240,208,.98), rgba(231,196,134,.94));
  --shadow:0 20px 46px rgba(18,55,71,.18);
  --shadow-soft:0 12px 28px rgba(18,55,71,.12);
}
.hero{
  min-height:312px !important;
  padding:22px 28px 24px !important;
  border-radius:0 0 34px 34px !important;
  box-shadow:0 22px 58px rgba(7,35,48,.30) !important;
}
.hero-bg-image{
  filter:saturate(1.10) contrast(1.10) brightness(.72) !important;
  background-position:center 22% !important;
}
.hero-overlay{
  background:
    linear-gradient(90deg, rgba(7,34,46,.92) 0%, rgba(8,44,58,.64) 38%, rgba(8,44,58,.22) 100%),
    linear-gradient(180deg, rgba(7,34,46,.15), rgba(7,34,46,.66)) !important;
}
.hero-content{max-width:1160px !important;}
.hero h1{
  font-size:clamp(3rem,6.2vw,5.05rem) !important;
  letter-spacing:-.055em !important;
  line-height:.90 !important;
  color:#fff0d4 !important;
}
.eyebrow{font-size:.82rem !important;color:#f8ead0 !important;}
.subtitle{font-size:1.28rem !important;color:#ffe7bd !important;}
#heroPeople{color:#ffe7bd !important;opacity:.90 !important;}
.dashboard-grid{gap:12px !important;}
.dash-card,.smart-rec-card{
  background:linear-gradient(145deg, rgba(7,52,68,.78), rgba(9,72,88,.64)) !important;
  border:1px solid rgba(255,234,196,.24) !important;
  box-shadow:0 16px 34px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.10) !important;
  backdrop-filter:blur(12px) saturate(125%) !important;
}
.dash-card{
  min-height:86px !important;
  padding:14px 15px !important;
  border-radius:22px !important;
}
.dash-card p,.dash-card strong,.dash-card small,.smart-rec-label,.smart-rec-content h3,.smart-rec-content span{color:#fff0d4 !important;}
.smart-rec-card{border-radius:25px !important;padding:13px 16px !important;}
.smart-rec-icon{background:rgba(255,240,212,.16) !important;}
.main-content{
  width:min(1160px, calc(100vw - 32px)) !important;
  margin:26px auto 0 !important;
  padding:0 0 122px !important;
}
.section-title{
  margin-bottom:20px !important;
  padding:0 !important;
  background:transparent !important;
}
.section-title>span{
  background:linear-gradient(145deg,#ffe8b6,#e2b96d) !important;
  color:#113747 !important;
  border:1px solid rgba(18,55,71,.18) !important;
  box-shadow:0 12px 26px rgba(18,55,71,.18) !important;
}
.section-title h2{
  font-size:clamp(2.15rem,4.6vw,3.25rem) !important;
  color:#123747 !important;
  letter-spacing:-.045em !important;
}
.section-title p{color:#475d64 !important;font-weight:500 !important;}
.today-card,.weather-panel,.note-card,.info-card,.upload-box,.lock-card,.more-card,.route-timeline-card,.hotel-card-pro,.food-card-premium,.food-zone-title,.document-group-title,.chat-avatar-picker,.expense-summary article,.family-balance-grid article,.hotel-dashboard article,.food-stat{
  background:linear-gradient(145deg, rgba(255,242,218,.94), rgba(232,198,137,.88)) !important;
  border:1px solid rgba(18,55,71,.18) !important;
  box-shadow:0 18px 40px rgba(18,55,71,.16), inset 0 1px 0 rgba(255,255,255,.50) !important;
  backdrop-filter:none !important;
}
.today-card,.weather-panel{padding:22px 24px !important;border-radius:28px !important;}
.today-card::before,.weather-panel::before,.note-card::before,.hotel-card-pro::before,.food-card-premium::before,.route-timeline-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:radial-gradient(circle at 12% 0%, rgba(255,255,255,.34), transparent 34%), radial-gradient(circle at 100% 100%, rgba(180,120,42,.10), transparent 38%);
}
.today-card > *,.weather-panel > *,.note-card > *,.hotel-card-pro > *,.food-card-premium > *,.route-timeline-card > *{position:relative;z-index:1;}
.home-smart-card{
  min-height:118px !important;
  border-radius:26px !important;
  padding:18px !important;
}
.home-smart-card::before{
  width:6px !important;
  background:linear-gradient(180deg,#0b556d,#c78131) !important;
}
.home-smart-card strong{color:#0b556d !important;}
.home-smart-card span{color:#123747 !important;font-size:1.14rem !important;}
.home-smart-card small{color:#52666d !important;}
.days-tabs{
  background:rgba(18,55,71,.13) !important;
  border:1px solid rgba(18,55,71,.16) !important;
  border-radius:26px !important;
  padding:12px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24) !important;
}
.day-tab{
  height:54px !important;
  min-width:98px !important;
  border-radius:18px !important;
  background:linear-gradient(145deg,#ffe9bd,#e6c27b) !important;
  color:#123747 !important;
}
.day-tab.active{
  background:linear-gradient(135deg,#123747,#0b6b83) !important;
  color:#fff0d4 !important;
  box-shadow:0 12px 28px rgba(18,55,71,.28) !important;
}
.day-head{
  padding:24px !important;
  border-radius:30px !important;
}
.day-head h3{
  color:#123747 !important;
  font-size:clamp(1.85rem,4vw,2.55rem) !important;
}
.day-date,.timeline-day,.label{color:#815d24 !important;}
.day-grid{gap:18px !important;}
.note-card{
  border-radius:28px !important;
  min-height:152px !important;
  padding:21px !important;
}
.note-card h4{color:#123747 !important;font-size:1.18rem !important;}
.day-section-head button,.edit-plan-btn,.edit-mustsee-btn,.edit-curiosities-btn,.edit-tips-btn,.edit-alerts-btn,.edit-route-btn,.edit-food-btn,.edit-rainplan-btn,.add-flex-btn,.map-link,.timeline-open,.comic-form button,.booking-form button,.upload-box button,.chat-form>button{
  background:linear-gradient(135deg,#123747,#0d6d84) !important;
  color:#fff0d4 !important;
  border:none !important;
  box-shadow:0 11px 24px rgba(18,55,71,.25) !important;
}
.weather-actions button,.food-price-filter button,.food-tag-filter button{
  background:linear-gradient(145deg,#ffe9bd,#e6c27b) !important;
  color:#123747 !important;
  border:1px solid rgba(18,55,71,.16) !important;
}
.weather-actions button.active,.food-price-filter button.active,.food-tag-filter button.active{
  background:linear-gradient(135deg,#123747,#0b6b83) !important;
  color:#fff0d4 !important;
}
.route-timeline-card{border-radius:30px !important;padding:22px !important;}
.timeline-dot{
  width:58px !important;
  height:58px !important;
  background:linear-gradient(135deg,#123747,#0b6b83) !important;
  color:#fff0d4 !important;
}
.timeline-top h3{font-size:1.45rem !important;color:#123747 !important;}
.hotel-dashboard,.food-dashboard{gap:14px !important;}
.hotel-card-pro,.food-card-premium{border-radius:30px !important;}
.hotel-icon,.food-icon{background:linear-gradient(145deg,#fff1cf,#e8c982) !important;}
.hotel-title h3,.food-info h3{color:#123747 !important;}
.hotel-pills span,.pill,.food-tags span{
  background:rgba(11,85,109,.12) !important;
  color:#0b556d !important;
  border:1px solid rgba(11,85,109,.10) !important;
}
input,select,textarea{
  background:rgba(255,247,231,.90) !important;
  border:1px solid rgba(18,55,71,.18) !important;
  color:#123747 !important;
}
.setup-card,.edit-modal-card{
  background:linear-gradient(145deg,rgba(255,242,218,.96),rgba(232,198,137,.92)) !important;
  border:1px solid rgba(18,55,71,.18) !important;
}
.bottom-nav{
  background:linear-gradient(145deg, rgba(255,236,197,.97), rgba(226,190,119,.95)) !important;
  border:1px solid rgba(18,55,71,.20) !important;
  box-shadow:0 20px 54px rgba(18,55,71,.28), inset 0 1px 0 rgba(255,255,255,.42) !important;
}
.bottom-nav button{color:#52666d !important;}
.bottom-nav button.active{
  background:linear-gradient(135deg,#123747,#0b6b83) !important;
  color:#fff0d4 !important;
}
@media(max-width:900px){
  .hero{min-height:292px !important;padding:22px 18px 22px !important;}
  .hero h1{font-size:3.45rem !important;}
  .dashboard-grid{grid-template-columns:repeat(4,1fr) !important;}
  .dash-card{min-height:84px !important;}
  .quick-actions{grid-template-columns:repeat(4,1fr) !important;}
  .day-grid{grid-template-columns:repeat(2,1fr) !important;}
}
@media(max-width:760px){
  .hero{padding:20px 14px 18px !important;border-radius:0 0 28px 28px !important;}
  .hero h1{font-size:2.45rem !important;}
  .dashboard-grid{grid-template-columns:repeat(2,1fr) !important;}
  .main-content{width:calc(100vw - 18px) !important;margin-top:20px !important;}
  .section-title h2{font-size:1.85rem !important;}
  .quick-actions,.day-grid{grid-template-columns:1fr !important;}
  .hotel-dashboard,.food-dashboard{grid-template-columns:repeat(2,1fr) !important;}
  .bottom-nav{width:calc(100vw - 10px) !important;bottom:5px !important;}
}
@media(max-width:420px){
  .hero h1{font-size:2.05rem !important;}
  .hotel-dashboard,.food-dashboard{grid-template-columns:1fr !important;}
  .bottom-nav button{flex-basis:68px !important;}
}
/* =====================================================
   TIPOGRAFÍA GLOBAL FINAL · TÍTULOS PWA
===================================================== */

/* Título principal del hero */
.hero h1{
  font-family:"Caveat",cursive !important;
  font-size:clamp(3.4rem,7vw,5.8rem) !important;
  line-height:.82 !important;
  font-weight:700 !important;
  letter-spacing:.01em !important;
  color:#123949 !important;
  text-shadow:none !important;
}

/* Títulos de secciones: Resumen, Ruta, Alojamientos, Días, Comer... */
.section-title h2,
#view-home .section-title h2,
#view-route .section-title h2,
#view-days .section-title h2,
#view-hotels .section-title h2{
  font-family:"Caveat",cursive !important;
  font-size:clamp(3rem,5vw,4.4rem) !important;
  line-height:.9 !important;
  font-weight:700 !important;
  letter-spacing:.01em !important;
  color:#123949 !important;
}

/* Subtítulos debajo de cada sección */
.section-title p,
#view-home .section-title p,
#view-route .section-title p,
#view-days .section-title p,
#view-hotels .section-title p{
  font-family:"Inter",system-ui,sans-serif !important;
  font-size:1rem !important;
  color:#4f6670 !important;
  line-height:1.25 !important;
}

/* Títulos interiores de tarjetas principales */
.today-card h3,
.timeline-top h3,
.route-timeline-card h3,
.hotel-title h3,
.note-card h4{
  font-family:"Caveat",cursive !important;
  color:#123949 !important;
  font-weight:700 !important;
  letter-spacing:.01em !important;
}

/* Ruta en coche específicamente */
#view-route .section-title h2,
#view-route .timeline-top h3{
  font-family:"Caveat",cursive !important;
}

/* Resumen del viaje específicamente */
#view-home .section-title h2{
  font-family:"Caveat",cursive !important;
}

/* Ajuste tablet/móvil */
@media(max-width:760px){
  .hero h1{
    font-size:3rem !important;
  }

  .section-title h2,
  #view-home .section-title h2,
  #view-route .section-title h2,
  #view-days .section-title h2,
  #view-hotels .section-title h2{
    font-size:2.65rem !important;
  }
}
/* =====================================================
   FORCE FINAL · TIPOGRAFÍA ÚNICA PWA
===================================================== */

body .hero h1,
body .section-title h2,
body #view-home .section-title h2,
body #view-route .section-title h2,
body #view-days .section-title h2,
body #view-hotels .section-title h2,
body #view-food .section-title h2,
body #view-expenses .section-title h2,
body #view-photos .section-title h2,
body #view-chat .section-title h2,
body #view-more .section-title h2{
  font-family:"Caveat",cursive !important;
  font-weight:700 !important;
  letter-spacing:.01em !important;
  color:#123949 !important;
}

body .hero h1{
  font-size:clamp(4rem,7vw,6.4rem) !important;
  line-height:.82 !important;
}

body .section-title h2{
  font-size:clamp(3.2rem,5vw,4.7rem) !important;
  line-height:.86 !important;
}

/* títulos de tarjetas */
body .today-card h3,
body .timeline-top h3,
body .route-timeline-card h3,
body .hotel-title h3,
body .note-card h4,
body .home-smart-title,
body #nextPlanTitle{
  font-family:"Caveat",cursive !important;
  font-weight:700 !important;
  letter-spacing:.01em !important;
  color:#123949 !important;
}

/* textos normales */
body .section-title p,
body .hero p,
body .today-card p,
body .timeline-mood,
body .hotel-title p,
body .note-card p{
  font-family:"Inter",system-ui,sans-serif !important;
}

/* móvil/tablet */
@media(max-width:760px){
  body .hero h1{
    font-size:3.4rem !important;
  }

  body .section-title h2{
    font-size:2.85rem !important;
  }
}