/* behappier — styles.css (MVP) */
:root{
  --bg:#FFF8F1; --ink:#4A3F35; --accent1:#F0C6AA; --accent2:#C8E6D0; --accent3:#E8DFF5;
  --radius:16px; --shadow:0 4px 14px rgba(0,0,0,.08); --motion:140ms cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box}
html,body{min-height:110vh}
html{background-color:var(--bg)}
body{
  margin:0; color:var(--ink);
  background: var(--bg) url('textures/Fondo-behappier.jpg') center/cover fixed no-repeat;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
/* Prevent horizontal scroll and ensure media scale within viewport */
html, body{overflow-x:hidden}
img, svg{max-width:100%; height:auto; display:block}
/* PWA safe-area padding to cover notch; bottom handled per-fixed buttons to avoid gap */
body{padding-top:env(safe-area-inset-top)}

/* When bottom nav is present, add padding-bottom so content doesn't go behind it */
body.with-bottom-nav main{padding-bottom:calc(80px + env(safe-area-inset-bottom))}

/* iOS PWA fix: avoid background-attachment: fixed issues in standalone */
@media (display-mode: standalone){
  body{background-attachment: scroll}
}
@supports (-webkit-touch-callout: none){
  body{background-attachment: scroll}
}
.site-header{padding:16px 0}
.container{width:min(920px, 92%); margin:0 auto}
.header-inner{display:flex; align-items:center; gap:12px; justify-content:space-between}
.logo{display:block; height:48px; width:auto}
.brandline{display:flex; align-items:center; gap:10px}
.site-title{font-family:"Patrick Hand", cursive; font-size:22px; color:var(--ink)}
.history{width:min(680px,96%)}
.center > .history{align-self:start; margin-top:12px}
.card{background:#ffffffdd; padding:24px; border-radius:var(--radius); box-shadow:var(--shadow)}
.h1{font-family:"Patrick Hand", cursive; font-size:28px; margin:0 0 12px}
.text-subtle{color:#6b6158}
.form{display:grid; gap:12px}
.input{width:100%; padding:12px 14px; border:1px solid #e4dcd4; border-radius:12px; font:inherit; background:#ffffff44}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; height:44px; padding:0 16px; border:1px solid transparent; border-radius:14px; cursor:pointer; text-decoration:none;
  background:var(--ink); color:#fff; box-shadow:0 6px 16px rgba(0,0,0,.12); transition:transform var(--motion), box-shadow var(--motion), background var(--motion), color var(--motion), border-color var(--motion)}
.btn:visited{color:#fff; text-decoration:none}
.btn:hover{text-decoration:none}
.btn:hover{transform:translateY(-1px); box-shadow:0 10px 24px rgba(0,0,0,.14)}
.btn:active{transform:translateY(0); box-shadow:0 6px 16px rgba(0,0,0,.12)}
.btn:focus-visible{outline:3px solid var(--accent1); outline-offset:2px}
.btn[disabled], .btn:disabled{opacity:.6; cursor:not-allowed; filter:grayscale(.1)}

/* Active/running state for toggle buttons */
.btn.is-active{box-shadow:0 10px 24px rgba(0,0,0,.16), inset 0 0 0 2px #ffffff44}
.btn.primary.is-active{background:#3c342c}
.btn.ghost.is-active{background:#ffffffaa}

/* Variants */
.btn.primary{background:var(--ink); color:#fff}
.btn.secondary{background:#ffffff; color:#2f281f; border-color:#e9ded4}
.btn.ghost{background:transparent; color:#2f281f; border-color:#e9ded4; box-shadow:none}
.btn.destructive{background:#e74c3c; color:#fff}
.btn.secondary:hover{background:#fff; box-shadow:0 8px 18px rgba(0,0,0,.10)}
.btn.ghost:hover{background:#ffffff88}
.btn.destructive:hover{filter:brightness(1.02)}

/* Sizes */
.btn.large{height:50px; padding:0 18px; border-radius:16px; font-size:15px; font-weight:700}
.btn.small{height:36px; padding:0 12px; border-radius:12px; font-size:14px}
.btn i{font-size:18px}
.btn.small i{font-size:16px}

/* Timer controls compact layout on small screens */
@media (max-width: 420px){
  #timer .btn{height:34px; padding:0 8px}
  #timer .btn.small{height:34px; padding:0 8px}
  #timer .btn i{font-size:14px}
  #timer .btn.small i{font-size:14px}
}
.stack-16{display:grid; gap:16px}
.center{display:grid; place-items:center; min-height:calc(100dvh - 154px)}
.center.center-top{place-items:start center}
small.help{color:#7d746b}
.alert{padding:10px 12px; border-radius:12px; background:#fff3cd; color:#6b5a2b; border:1px solid #ffe69c}
.success{padding:10px 12px; border-radius:12px; background:#e8f8ef; color:#1f6b3a; border:1px solid #bfe7cf}

/* Icon button (header) */
.icon-btn{display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:12px; color:var(--ink); background:#ffffffaa; text-decoration:none; transition:transform var(--motion), box-shadow var(--motion)}
.icon-btn:hover{transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,.12)}
.icon-btn i{font-size:20px; line-height:1}
.icon-btn svg{width:22px; height:22px; display:block}

/* Floating Action Button (bottom-right) */
.fab{position:fixed; right:calc(20px + env(safe-area-inset-right)); bottom:calc(24px + env(safe-area-inset-bottom)); z-index:1000; width:52px; height:52px; border-radius:16px; display:flex; align-items:center; justify-content:center; background:var(--ink); color:#fff; text-decoration:none; box-shadow:var(--shadow); transition:transform var(--motion), box-shadow var(--motion)}
.fab:hover{transform:translateY(-1px); box-shadow:0 10px 24px rgba(0,0,0,.16)}
.fab i{font-size:24px}

/* Home button (bottom-left), same visual as logout icon-btn */
.icon-btn.home{position:fixed; left:calc(20px + env(safe-area-inset-left)); bottom:calc(24px + env(safe-area-inset-bottom)); z-index:1100}
/* History button (bottom-right), same visual */
.icon-btn.history{position:fixed; right:calc(20px + env(safe-area-inset-right)); bottom:calc(24px + env(safe-area-inset-bottom)); z-index:1100}

/* Bottom navigation (all viewports) */
.bottom-nav{position:fixed; left:0; right:0; bottom:0; z-index:1200; display:flex; gap:6px; padding:8px max(10px, env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-right));
  background:rgba(255,255,255,0.86); -webkit-backdrop-filter: blur(10px) saturate(1.05); backdrop-filter: blur(10px) saturate(1.05); border-top:1px solid #e9ded4}
.bottom-nav .nav-item{flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:8px 6px; border-radius:12px; color:#4A3F35; text-decoration:none; font-size:11px; font-weight:600}
.bottom-nav .nav-item i{font-size:22px}
.bottom-nav .nav-item.active{background:#fff}
.bottom-nav .nav-item.active, .bottom-nav .nav-item.active i{color:#2f281f}
.bottom-nav .nav-item:focus-visible{outline:3px solid var(--accent1); outline-offset:2px}

/* Desenfoque contextual sobre el fondo para mejorar legibilidad */
.desenfocado{background:rgba(255,255,255,0.7); -webkit-backdrop-filter: blur(7px) saturate(1.05); backdrop-filter: blur(7px) saturate(1.05);}

/* Modal overlay and daily mood styles */
.modal-overlay{position:fixed; top:0; left:0; right:0; bottom:0; z-index:2000; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.4); padding:20px}
.modal{max-width:480px; width:100%; max-height:90vh; overflow-y:auto; margin:0}
.mood-options{display:grid; gap:8px}
.mood-option{
  display:flex; align-items:center; gap:12px; padding:6px 12px; border-radius:12px;
  border:2px solid #eee; background:#ffffff88; cursor:pointer;
  transition:all var(--motion)
}
.mood-option input[type="radio"]{display:none}
.mood-option .emoji{font-size:24px}
.mood-option .label{font-weight:600}
.mood-option:hover{transform:translateY(-1px)}
.mood-option.selected{border-color:#4A3F35 !important; background:#fff !important}
.mood-option input[type="radio"]:focus-visible + span{outline:2px solid var(--accent1); outline-offset:2px} 

/* History list layout safety: allow flex children to shrink and wrap */
.history-list .card > div{min-width:0}
.history-list{overflow-x:hidden; overflow-y:auto; align-content:start; justify-content:start; align-items:start; place-content:start}
.history-list {height: 60vh !important; max-height: 60vh !important}

/* History page header */
.history-header{display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:8px}

/* History row items (Variant A) */
.history-list .history-item{display:flex; gap:12px; align-items:center; padding:12px 14px; box-shadow:none; background:#ffffff88}
.history-list .history-item + .history-item{border-top:1px solid #eee5dc}
.history-list .dur-col{min-width:64px; display:flex; align-items:center; justify-content:center}
.history-title{font-weight:600; margin:0 0 4px}
.history-note{color:#7d746b; font-size:13px; overflow-wrap:anywhere}

/* Badges and chips */
.badge{display:inline-flex; align-items:center; justify-content:center; height:26px; padding:0 10px; border-radius:999px; font-weight:600; font-size:13px}
.badge-duration{background:#F0C6aa; color:#3b2f26; border:1px solid #e8b892}
.chip{display:inline-flex; align-items:center; height:24px; padding:0 10px; border-radius:999px; font-size:12px; color:#6b6158; background:#ffffff88; border:1px solid #ede4db}

/* Home hero */
.hero{margin:12px 0; border-radius:var(--radius); box-shadow:var(--shadow)}
.hero .brand{font-family:"Patrick Hand", cursive; font-size:36px}
.hero .subtitle{margin:4px 0 0; color:#6b6158}
.durations{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.btn.duration{height:56px; padding:0 18px; background: #ffffff44;; color:var(--ink); box-shadow:0 6px 16px rgba(0,0,0,.12); font-family:"Patrick Hand", cursive; font-size:20px; letter-spacing:.3px}
.btn.duration:hover{transform:translateY(-2px); box-shadow:0 12px 24px rgba(0,0,0,.14)}
.btn.duration:active{transform:translateY(0); box-shadow:0 6px 16px rgba(0,0,0,.12)}
.btn.duration:focus-visible{outline:3px solid var(--accent1); outline-offset:2px}
/* Estado seleccionado (duración activa) */
.btn.duration[aria-current="true"]{background:#ffffff88; box-shadow:0 10px 24px rgba(0,0,0,.16)}

/* Chooser (botones apilados centrados) */
.chooser{margin:12px 0; border-radius:var(--radius); box-shadow:var(--shadow)}
.chooser .container{display:grid; justify-items:center; gap:12px; padding:24px 0}
.chooser .helper{margin:0; color:#6b6158; font-size:15px}
.chooser .durations{flex-direction:column; align-items:stretch; width:100%; max-width:520px}
.chooser .btn.duration{width:100%}

/* Microinteracciones y animaciones de entrada escalonadas */
@keyframes fadeUp{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
.chooser .helper{animation:fadeUp 220ms var(--motion) 20ms both}
.chooser .durations a:nth-child(1){animation:fadeUp 240ms var(--motion) 60ms both}
.chooser .durations a:nth-child(2){animation:fadeUp 240ms var(--motion) 100ms both}
.chooser .durations a:nth-child(3){animation:fadeUp 240ms var(--motion) 140ms both}

/* Efecto glass sutil en hover */
.btn.duration{transition:transform var(--motion), box-shadow var(--motion), filter var(--motion), background 200ms ease}
.btn.duration:hover{filter:saturate(1.06) brightness(1.03)}

/* Page transition when leaving */
@keyframes pageOut{to{opacity:0; transform:scale(.98); filter:blur(4px)}}
body.leaving main{animation: pageOut 280ms var(--motion) forwards}

/* Responsive tweaks */
@media (max-width: 600px){
  /* Hide header account icon on small screens to avoid duplication */
  .site-header .icon-btn{display:none}
  .h1{font-size:22px}
  .card{padding:16px}
  .history{padding:16px}
  .history-list .card{padding:8px 12px}
  .history-list .dur-col{min-width:44px}
  .history-list .date-col{min-width:auto}
  .history-list .date-col small{font-size:12px; white-space:nowrap}
  .history-list .card{flex-wrap:wrap; align-items:center}
  .history-list .date-col{margin-left:auto}
  .hero .brand{font-size:30px}
  .btn.duration{height:52px; font-size:19px; padding:0 16px}
  .fab{right:calc(18px + env(safe-area-inset-right)); bottom:calc(20px + env(safe-area-inset-bottom)); width:48px; height:48px; border-radius:14px}
  .fab i{font-size:22px}
  .icon-btn.home{left:calc(18px + env(safe-area-inset-left)); bottom:calc(20px + env(safe-area-inset-bottom))}
  .icon-btn.history{right:calc(18px + env(safe-area-inset-right)); bottom:calc(20px + env(safe-area-inset-bottom))}
}

/* Desktop background and logout alignment */
@media (min-width: 900px){
  body{ background-image: url('textures/fondo-pc-behappier.jpg'); }
  .site-header .icon-btn{ position:fixed; top:16px; right:20px; z-index:1100 }
  /* Desktop bottom-nav refinements */
  .bottom-nav{justify-content:center; gap:12px; padding:10px 20px calc(14px + env(safe-area-inset-bottom)) 20px}
  .bottom-nav .nav-item{max-width:160px; font-size:12px}
}