:root{--teal:#0ba7a7;--teal2:#42d6c7;--ink:#102033;--muted:#7b8798;--line:#e8eef3;--danger:#f05b64;--warn:#4a90e2;--ok:#39b86a;--shadow:0 18px 50px rgba(24,54,78,.10);--radius:24px}*{box-sizing:border-box}html,body{max-width:100%;overflow-x:hidden}body{margin:0;background:radial-gradient(circle at 8% 5%,#dffbff 0,transparent 32%),radial-gradient(circle at 92% 12%,#eef0ff 0,transparent 28%),linear-gradient(160deg,#f2fcff,#fbfbff 48%,#eef9f8);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;color:var(--ink)}a{text-decoration:none;color:inherit}.app-shell{width:100%;max-width:1240px;min-height:100vh;margin:0 auto;background:rgba(255,255,255,.55);backdrop-filter:blur(14px);padding-bottom:40px}.screen{padding:42px clamp(26px,4vw,58px);max-width:1180px;margin:auto}.card{background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:var(--radius);padding:24px;margin:18px 0;box-shadow:0 12px 30px rgba(20,50,70,.055);overflow:hidden}.btn{border:0;border-radius:18px;background:linear-gradient(135deg,var(--teal),#087e91);color:#fff;padding:14px 20px;font-weight:800;min-height:48px;display:inline-flex;align-items:center;justify-content:center;gap:9px;width:100%;box-shadow:0 10px 22px rgba(11,167,167,.22);cursor:pointer;line-height:1.2;text-align:center;white-space:normal}.btn.auto{width:auto}.btn.secondary{background:#fff;color:var(--teal);border:1px solid var(--line);box-shadow:none}.btn.danger{color:var(--danger);background:#fff;box-shadow:none;border:1px solid #ffe2e6}.action-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px;align-items:center}.action-row .btn{flex:1 1 170px}.topbar,.page-title{display:flex;justify-content:space-between;align-items:center;gap:14px}.hello h1{font-size:32px;margin:0 0 6px}.hello p,.small{margin:0;color:var(--muted);font-size:13px}.icon-btn,.back-link{height:44px;width:44px;min-width:44px;border-radius:15px;background:#f5fafb;display:grid;place-items:center;position:relative;color:var(--teal);border:1px solid var(--line)}.dot{position:absolute;right:9px;top:8px;width:9px;height:9px;background:#ff4b6a;border-radius:50%}.next-card{background:linear-gradient(135deg,#eefbff,#f2fbfb);display:flex;justify-content:space-between;gap:18px;align-items:center}.next-card .btn{margin-top:14px}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.tile{border:1px solid var(--line);border-radius:20px;padding:20px;background:#fff;box-shadow:0 8px 22px rgba(20,50,70,.04);min-height:120px;display:flex;flex-direction:column;justify-content:center;gap:10px}.tile i{font-size:25px;color:var(--teal)}.tile b{font-size:14px}.bottom-nav{position:sticky;bottom:0;margin:0 auto;max-width:1180px;width:calc(100% - 40px);height:76px;background:rgba(255,255,255,.93);backdrop-filter:blur(14px);border:1px solid var(--line);display:grid;grid-template-columns:repeat(4,1fr);z-index:5;border-radius:24px;box-shadow:0 -8px 34px rgba(20,50,70,.08)}.bottom-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:#7d8a99;font-size:20px}.bottom-nav span{font-size:12px}.bottom-nav a.active{color:var(--teal);font-weight:800}.tabs{display:flex;border-bottom:1px solid var(--line);margin:10px 0 16px;overflow:auto}.tabs a{flex:1;text-align:center;padding:12px;font-size:13px;color:var(--muted);min-width:110px}.tabs a.active{color:var(--teal);border-bottom:3px solid var(--teal);font-weight:800}.appt-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.appt-list .card{margin:0}.appt{display:grid;grid-template-columns:72px minmax(0,1fr);gap:14px;align-items:start}.datebox{text-align:center;border-right:1px solid var(--line);padding-right:12px}.datebox b{font-size:30px;display:block}.pill{border-radius:999px;padding:5px 10px;font-size:11px;font-weight:800;display:inline-flex;align-items:center;gap:5px}.pill.ok{background:#e7f8ee;color:var(--ok)}.pill.warn{background:#eaf3ff;color:#357ec7}.pill.danger{background:#ffecef;color:var(--danger)}.list-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}.list-row:last-child{border-bottom:0}.input,select,textarea{width:100%;max-width:100%;border:1px solid var(--line);background:#fbfdff;border-radius:16px;padding:14px;margin:7px 0 12px;font:inherit}label{font-size:13px;color:var(--muted);font-weight:700}.alert{padding:12px;border-radius:16px;background:#fff1f2;color:#b4232d;margin:10px 0}.success{padding:12px;border-radius:16px;background:#ecfdf3;color:#087443;margin:10px 0}.calendar-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 0}.calendar-wrap{width:100%;overflow:hidden}.calendar{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;margin:12px 0;width:100%}.weekday{text-align:center;color:var(--muted);font-weight:800;font-size:12px}.day{border:1px solid var(--line);border-radius:16px;background:#fff;padding:10px;min-height:78px;cursor:pointer;text-align:left;min-width:0}.day.empty{opacity:.35;pointer-events:none;background:#f8fafc}.day.has-slots{border-color:#a9ece8;background:#f0fffe}.day.selected{outline:3px solid rgba(11,167,167,.18);border-color:var(--teal)}.slots{display:grid;grid-template-columns:repeat(auto-fit,minmax(105px,1fr));gap:10px;margin-top:12px}.slot{border:1px solid var(--line);border-radius:16px;background:#fff;padding:12px;text-align:center;cursor:pointer;font-weight:800;min-width:0}.slot input{display:none}.slot.selected{border-color:var(--teal);background:#eafffd;color:#087e91}.slot.unavailable{opacity:.45;text-decoration:line-through;pointer-events:none}.message-layout{display:grid;grid-template-columns:minmax(300px,380px) minmax(0,1fr);gap:18px;align-items:start}.chat{display:flex;flex-direction:column;gap:10px;max-width:100%}.bubble{max-width:min(82%,640px);padding:13px 14px;border-radius:18px;background:#f3f7fb;overflow-wrap:anywhere}.bubble p{margin:.5rem 0}.bubble.patient{align-self:flex-end;background:#e7fbfa}.bubble.clinic{align-self:flex-start;background:#fff;border:1px solid var(--line)}.admin-layout{max-width:1280px;margin:0 auto;padding:24px}.admin-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:20px;box-shadow:var(--shadow);margin-bottom:18px;overflow:auto}.admin-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;align-items:end}.table{width:100%;border-collapse:collapse;min-width:760px}.table th,.table td{padding:12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}.admin-nav{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}.admin-nav a{padding:10px 12px;border-radius:13px;background:#eefbfb;color:#087e91;font-weight:800}.floating-add{width:auto;position:fixed;right:calc(50% - 560px);bottom:96px;border-radius:22px;padding:14px 18px}.splash{min-height:100vh;display:flex;flex-direction:column;justify-content:space-between;text-align:center;background:#fff;max-width:430px;margin:auto}.logo{font-size:32px;font-weight:900}.logo .tooth{font-size:56px;display:block;color:var(--teal)}.hero-img{height:250px;border-radius:34px;background:linear-gradient(135deg,#dff7f7,#fff);display:grid;place-items:center;font-size:95px;margin:25px 0}.avatar{width:82px;height:82px;border-radius:50%;background:linear-gradient(135deg,#d7f5f5,#fff);display:grid;place-items:center;font-size:38px;margin:auto}.progress{height:7px;background:#dfe8ed;border-radius:99px;overflow:hidden}.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--teal),var(--teal2))}.promo{display:flex;gap:12px;align-items:center;background:linear-gradient(135deg,#fff,#eaf0ff)}.promo .photo{height:70px;width:90px;border-radius:18px;background:#d9f1ff;display:grid;place-items:center;font-size:38px;flex:0 0 auto}.onboarding-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media(max-width:899px){body{background:#fff}.app-shell{max-width:430px;background:#fff;box-shadow:0 0 50px rgba(30,80,100,.12);padding-bottom:88px}.screen{padding:18px;max-width:430px}.grid{grid-template-columns:1fr 1fr;gap:12px}.bottom-nav{position:fixed;left:0;right:0;bottom:0;transform:none;max-width:430px;width:100%;height:74px;border-radius:0;border-left:0;border-right:0;border-bottom:0}.page-title h2{font-size:18px}.hello h1{font-size:25px}.floating-add{right:18px;bottom:88px}.calendar{gap:5px}.weekday{font-size:10px}.day{min-height:54px;padding:6px;border-radius:12px;font-size:12px}.day b{font-size:14px}.day .pill{display:none}.admin-layout{padding:14px}.action-row,.message-layout{display:grid;grid-template-columns:1fr}.btn.auto{width:100%}.table{font-size:14px}.appt-list{display:block}.appt-list .card{margin:14px 0}.message-layout .card{margin:10px 0}.bubble{max-width:92%;font-size:14px}.slots{grid-template-columns:repeat(2,minmax(0,1fr))}.onboarding-grid{grid-template-columns:1fr}.list-row{align-items:flex-start;flex-direction:column}.next-card{align-items:flex-start}.next-card>div:last-child{display:none}}@media(max-width:390px){.appt{grid-template-columns:58px minmax(0,1fr)}.datebox b{font-size:25px}.card{padding:15px}.btn{padding:13px}.screen{padding:14px}.calendar{gap:4px}.day{min-height:48px;padding:5px}.slots{grid-template-columns:1fr 1fr}}

/* FIX 2026-04: fondo continuo + navegación fija + responsive sin desbordes */
html,body{width:100%;min-height:100%;overflow-x:hidden;background:linear-gradient(135deg,#eefcff 0%,#ffffff 42%,#f2fbfa 100%);}
body:before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(circle at 0% 0%,rgba(188,246,252,.75),transparent 34%),radial-gradient(circle at 100% 10%,rgba(227,230,255,.85),transparent 32%),radial-gradient(circle at 50% 100%,rgba(216,250,244,.65),transparent 35%);}
body{background:transparent;}
.app-shell{max-width:none;width:100%;min-height:100vh;background:transparent!important;backdrop-filter:none;box-shadow:none;padding-bottom:132px;display:block;}
.screen{width:min(1180px,calc(100% - 48px));max-width:1180px;margin:0 auto;padding:42px 0;}
.bottom-nav{position:fixed;left:50%;right:auto;bottom:24px;transform:translateX(-50%);width:min(1180px,calc(100% - 80px));max-width:1180px;margin:0;height:78px;border-radius:28px;z-index:1000;}
.floating-add{right:max(32px,calc((100vw - 1180px)/2 + 32px));bottom:124px;z-index:1001;}
.card,.tile,.bottom-nav{box-shadow:0 18px 45px rgba(25,70,95,.08);}
.next-card,.promo{overflow:hidden;}
.btn{position:relative;z-index:1;}
.action-row{clear:both;}
.calendar-wrap{max-width:100%;overflow:hidden;}
.calendar,.slots,.message-layout,.appt-list,.grid,.onboarding-grid{max-width:100%;}
.day,.slot,.card,.tile,.input,select,textarea{min-width:0;}
.message-layout{grid-template-columns:minmax(280px,360px) minmax(0,1fr);}
.chat{min-width:0;}
.bubble{word-break:break-word;overflow-wrap:anywhere;}

@media(min-width:900px){
  .screen:first-child{padding-top:48px;}
  .bottom-nav a{transition:transform .18s ease,color .18s ease;}
  .bottom-nav a:hover{transform:translateY(-2px);color:var(--teal);}
}

@media(max-width:899px){
  html,body{height:100%;}
  body{background:#fff;}
  body:before{display:none;}
  .app-shell{max-width:430px;margin:0 auto;min-height:100dvh;background:#fff!important;box-shadow:0 0 50px rgba(30,80,100,.12);padding-bottom:calc(92px + env(safe-area-inset-bottom));}
  .screen{width:100%;max-width:430px;padding:18px 16px 22px;margin:0 auto;}
  .bottom-nav{position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:100%;max-width:430px;height:calc(74px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);border-radius:22px 22px 0 0;border-left:0;border-right:0;border-bottom:0;box-shadow:0 -12px 34px rgba(20,50,70,.12);}
  .floating-add{right:18px;bottom:calc(88px + env(safe-area-inset-bottom));}
  .calendar-head{gap:8px;}
  .calendar-head .btn{padding:10px 12px;min-height:40px;border-radius:14px;}
  .calendar{grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;}
  .weekday{font-size:9px;}
  .day{min-height:46px;padding:5px 3px;border-radius:10px;text-align:center;}
  .day b{font-size:13px;}
  .day small,.day .pill{display:none!important;}
  .slots{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
  .slot{padding:11px 6px;border-radius:14px;font-size:13px;}
  .message-layout{display:block;}
  .message-layout>.card{margin:12px 0;width:100%;}
  .chat{max-height:none;width:100%;}
  .bubble{max-width:88%;font-size:14px;line-height:1.35;}
  textarea.input{min-height:96px;}
  .action-row .btn,.btn.auto{width:100%;}
  .next-card .btn{margin-top:18px;}
}

@media(max-width:390px){
  .screen{padding-left:12px;padding-right:12px;}
  .grid{gap:10px;}
  .tile{padding:15px;}
  .card{padding:15px;}
  .calendar{gap:3px;}
  .day{min-height:42px;font-size:11px;}
  .slots{grid-template-columns:1fr 1fr;}
}

/* FIX 2026-04-30: botón nueva cita dentro del marco app + perfil bonito */
.floating-add{position:fixed;left:auto;right:max(28px,calc((100vw - 1180px)/2 + 28px));bottom:124px;transform:none;width:auto;max-width:calc(100vw - 36px);white-space:nowrap;z-index:1002;}
.profile-menu{padding:8px 18px;}
.profile-menu .list-row{display:flex;flex-direction:row!important;align-items:center!important;justify-content:space-between;gap:14px;padding:16px 4px;color:var(--ink);}
.profile-menu .menu-left{display:flex;align-items:center;gap:12px;min-width:0;}
.profile-menu .menu-icon{width:38px;height:38px;min-width:38px;border-radius:14px;display:grid;place-items:center;background:#eefbfb;color:var(--teal);font-size:16px;}
.profile-menu .menu-arrow{color:#9aa7b5;font-size:18px;}
.profile-menu .logout-row{color:var(--danger)!important;}
.profile-menu .logout-row .menu-icon{background:#fff1f2;color:var(--danger);}
@media(max-width:899px){.floating-add{right:auto!important;left:calc(50% + min(50vw,215px) - 18px);transform:translateX(-100%);bottom:calc(88px + env(safe-area-inset-bottom));padding:13px 16px;border-radius:20px;}.profile-menu{border-radius:24px;padding:8px 16px;}.profile-menu .list-row{padding:15px 2px;}.profile-menu .list-row span{font-size:15px;}}
@media(max-width:360px){.floating-add{font-size:14px;padding:12px 14px;}}

/* ALPAZINO UPDATES */
.next-card-icon { display:flex; align-items:center; justify-content:center; flex-shrink:0; }
@media(max-width:899px){
  .next-card { align-items:center; }
  .next-card-icon { display:flex !important; }
  .next-card-icon img { width:56px; height:56px; }
}

/* ===== ALPAZINO FIXES ===== */

/* Next-card redisseny */
.next-card {
  background: linear-gradient(135deg, #e8f4ff, #f0fbff);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 22px 24px;
}
.next-card-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.next-card-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #29508A;
  opacity: .8;
}
.next-card-date {
  font-size: 22px;
  font-weight: 900;
  color: #29508A;
  line-height: 1.1;
}
.next-card-title {
  font-size: 15px;
  font-weight: 600;
  color: #102033;
}
.next-card .pill {
  align-self: flex-start;
}
.next-card .btn {
  margin-top: 10px;
  width: auto;
  font-size: 14px;
  padding: 10px 18px;
  border-radius: 14px;
}

/* Icona calendari — visible sempre, fins i tot en mòbil */
.next-card-icon {
  flex-shrink: 0;
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.next-card-icon img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  display: block;
}

@media(max-width:899px){
  .next-card {
    align-items: flex-start;
  }
  .next-card-icon {
    display: flex !important;
    align-self: center;
  }
  .next-card-icon img {
    width: 60px;
    height: 60px;
  }
  .next-card-date {
    font-size: 19px;
  }
}

/* Index: imatge pacient adaptada */
.patient-hero {
  background: #fff;
  border-radius: 34px;
  margin: 20px 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.patient-hero img {
  width: 100%;
  max-height: 300px;
  object-fit: contain;
  object-position: center;
  display: block;
}
@media(max-width:430px){
  .patient-hero img {
    max-height: 230px;
  }
}

/* Tile amb imatge PNG en lloc de FA icon */
.tile-icon-img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}
.tile {
  align-items: center;
  text-align: center;
}

/* Tiles horitzontals: icona a l'esquerra, text a la dreta */
.tile {
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  min-height: 72px !important;
  padding: 14px 16px !important;
  text-align: left !important;
}
.tile-icon-img {
  width: 40px !important;
  height: 40px !important;
  flex-shrink: 0;
}
.tile b {
  font-size: 13px !important;
  line-height: 1.3;
}
@media(max-width:899px){
  .tile {
    padding: 12px 14px !important;
    gap: 10px !important;
    min-height: 64px !important;
  }
  .tile-icon-img {
    width: 36px !important;
    height: 36px !important;
  }
  .tile b {
    font-size: 12px !important;
  }
}

/* Botó "Veure detalls" del next-card sempre curt */
.next-card .btn.auto {
  width: auto !important;
  padding: 10px 20px !important;
  font-size: 13px !important;
  align-self: flex-start;
}

/* Index splash sin scroll, todo visible y más arriba */
.splash {
  min-height: 100vh !important;
  height: 100dvh !important;
  overflow: hidden !important;
  justify-content: center !important;
  gap: 32px !important;
  padding: 40px 26px 32px !important;
  box-sizing: border-box !important;
}
.splash h2 {
  margin-bottom: 16px !important;
}
.splash .btn {
  margin-bottom: 0 !important;
}
@media(max-width:430px){
  .splash {
    gap: 24px !important;
    padding: 32px 22px 28px !important;
  }
  .splash img[alt="Alpazino"] {
    width: 160px !important;
    height: 160px !important;
  }
  .splash h2 {
    font-size: 20px !important;
  }
}

/* Tiles: icona centrada a dalt, text centrat a baix - layout vertical */
.tile {
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 10px !important;
  min-height: 110px !important;
  padding: 18px 12px !important;
}
.tile-icon-img {
  width: 52px !important;
  height: 52px !important;
  flex-shrink: 0;
}
.tile b {
  font-size: 14px !important;
  line-height: 1.3;
  display: block;
}
@media(max-width:899px){
  .tile {
    min-height: 100px !important;
    padding: 16px 10px !important;
    gap: 8px !important;
  }
  .tile-icon-img {
    width: 46px !important;
    height: 46px !important;
  }
  .tile b {
    font-size: 13px !important;
  }
}

/* Splash index: ocupa exactament la pantalla, sense scroll, contingut centrat */
body:has(.splash) {
  overflow: hidden !important;
  height: 100dvh !important;
}
body:has(.splash) .app-shell {
  height: 100dvh !important;
  min-height: unset !important;
  padding-bottom: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}
body:has(.splash) .screen {
  padding: 0 26px !important;
  margin: 0 auto !important;
  flex: 1;
  display: flex !important;
  align-items: stretch !important;
}
.splash {
  min-height: unset !important;
  height: 100% !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 28px !important;
  padding: 0 !important;
  width: 100% !important;
}
.splash h2 {
  margin: 0 0 4px !important;
}

/* Documents page */
.doc-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 4px;
}
.doc-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 18px 20px;
  box-shadow: 0 4px 16px rgba(20,50,70,.05);
  text-decoration: none;
  color: inherit;
  transition: box-shadow .15s, border-color .15s;
}
.doc-card:hover {
  box-shadow: 0 8px 28px rgba(20,50,70,.10);
  border-color: #a9d4f5;
}
.doc-icon {
  font-size: 40px;
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0f7ff;
  border-radius: 16px;
}
.doc-info {
  flex: 1;
  min-width: 0;
}
.doc-info b {
  font-size: 15px;
  display: block;
  margin-bottom: 3px;
}
.doc-info .small {
  margin-bottom: 6px;
}
.doc-meta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--muted);
}
.doc-meta span {
  display: flex;
  align-items: center;
  gap: 4px;
}
.doc-dl {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--teal), #087e91);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 16px;
}

/* Fix date input responsive */
input[type="date"].input {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
}

/* Admin upload form */
.admin-upload-form .input {
  margin: 4px 0 0;
}