/* ================================
   GymBuddy — styles.css (UI 2025 v7)
   Header con logotipo centrado + nav superior + rest timers (ejercicio y serie)
   Paleta: gris más claro + amarillo #FAE750
=================================== */

/* Tokens */
:root{
  --bg:#161A20; --bg-2:#1A2028;
  --panel:#1E2430; --panel-2:#222A36; --panel-3:#252F3D;
  --text:#F6F8FB; --muted:#A8B0BE;
  --line:#2B3543; --ring:#2F3A4A;
  --accent:#FAE750; --accent-2:#EAD63F; --accent-3:#FFF489;
  --accent-soft:rgba(250,231,80,.14); --accent-line:rgba(250,231,80,.45);
  --success:#28CB74; --danger:#FF5C5C;
  --r-lg:12px; --r-md:10px; --r-sm:8px;
  --shadow-soft:0 10px 26px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.02);
}
*{ box-sizing:border-box } html,body{ height:100% }
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial;
  color:var(--text);
  background:
    radial-gradient(900px 600px at 80% -10%, rgba(250,231,80,.06), transparent 55%),
    radial-gradient(900px 600px at -10% 120%, rgba(250,231,80,.04), transparent 40%),
    var(--bg);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; -webkit-tap-highlight-color:transparent;
}
::selection{ background: rgba(250,231,80,.22) }

/* Layout base */
.app{ min-height:100%; padding:16px 14px 96px; max-width:640px; margin:0 auto; }
.grid{ display:grid; grid-template-columns:1fr; gap:14px }
.row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap }
.space{ flex:1 } .small{ font-size:12px; color:var(--muted) }

/* Header con logotipo centrado */
.header{ position:sticky; top:0; z-index:30; margin:-16px -14px 12px; padding:10px 14px 8px;
  background:linear-gradient(180deg, rgba(34,40,52,.92), rgba(26,32,40,.72) 60%, rgba(26,32,40,0));
  border-bottom:1px solid var(--line); backdrop-filter: blur(10px);
}
.header .bar{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center }
.header .left{ justify-self:start } .header .center{ justify-self:center } .header .right{ justify-self:end }

.brand{ display:flex; align-items:center; gap:10px; color:var(--accent) }
.brand-text{ font-weight:900; letter-spacing:.4px }
.brand-icon{ filter: drop-shadow(0 0 0 rgba(0,0,0,0)); }

.back-btn{
  display:inline-flex; align-items:center; gap:8px; padding:10px 12px; border-radius:999px;
  background:linear-gradient(180deg, var(--panel), var(--panel-2)); border:1px solid var(--line);
  color:var(--text); cursor:pointer; transition:transform .06s ease, border-color .2s ease, background .2s ease;
}
.back-btn:active{ transform: translateY(1px) } .back-btn:hover{ border-color:#364253 }

/* Barra progreso y meta workout */
.progressbar{ position:relative; width:100%; height:8px; border-radius:999px; background:#0F141B; border:1px solid var(--ring); margin-top:10px; overflow:hidden }
.progressbar-fill{ position:absolute; left:0; top:0; height:100%; width:0%; background: linear-gradient(90deg, var(--accent-3), var(--accent)); box-shadow: inset 0 0 6px rgba(0,0,0,.2) }
.wo-topline{ display:flex; align-items:center; justify-content:space-between; margin:6px 0 10px; color:var(--muted); font-size:12px }

/* Nav superior de ancho completo */
.workout-navline{ display:flex; align-items:center; gap:10px; padding:8px; border:1px solid var(--line); border-radius:var(--r-lg); background:linear-gradient(180deg,#1b212c,#181e28); margin-bottom:12px }
.navline-btn{ width:44px; height:44px; display:grid; place-items:center; border:1px solid var(--ring); border-radius:10px; background:linear-gradient(180deg,#151A22,#10151C); color:#E8ECF4; cursor:pointer; transition:border-color .2s ease, transform .06s ease }
.navline-btn:hover{ border-color:#3A465A } .navline-btn:active{ transform: translateY(1px) }
.navline-spacer{ flex:1 }

/* Tarjetas ancho completo */
.card{ width:100%; background:linear-gradient(180deg, var(--panel), var(--panel-2)); border:1px solid var(--line); border-radius:var(--r-lg); padding:16px; box-shadow:var(--shadow-soft); transition:border-color .2s ease, transform .06s ease, background .2s ease }
.card:hover{ border-color:#3A465A } .card:active{ transform: translateY(1px) }
.card.list{ padding:14px 16px }

/* Hero portada */
.hero-grid{ display:grid; gap:14px }
.hero-card{ position:relative; overflow:hidden; border-radius:var(--r-lg); border:1px solid #2A3342; min-height:200px; display:flex; align-items:flex-end; background:#12161d; box-shadow:var(--shadow-soft) }
.hero-card .bg{ position:absolute; inset:0; background-size:cover; background-position:center; filter:saturate(1) brightness(.74); transform:scale(1.03) }
.hero-card .overlay{ position:absolute; inset:0; background:linear-gradient(140deg, transparent 40%, rgba(0,0,0,.55) 100%) }
.hero-card .label{ position:relative; z-index:2; padding:20px; font-size:22px; font-weight:800; letter-spacing:.2px }

/* Botones */
.btn{ appearance:none; border:none; outline:none; cursor:pointer; background:linear-gradient(180deg, var(--accent), var(--accent-2)); color:#1A1C22; padding:12px 16px; border-radius:10px; font-weight:800; letter-spacing:.2px; transition: transform .06s ease, opacity .2s ease, filter .2s ease, border-color .2s ease }
.btn:hover{ filter:brightness(1.05) } .btn:active{ transform: translateY(1px) }
.btn.secondary{ background:linear-gradient(180deg, #171B22, #13171D); color:#E8ECF4; border:1px solid var(--line) }
.btn.ghost{ background:transparent; border:1px solid var(--line); color:#E5E8EF }
.btn.icon{ display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; padding:0; border-radius:10px }
.icon-btn{ appearance:none; cursor:pointer; padding:9px; border:1px solid var(--line); background:linear-gradient(180deg, #151A22, #11161D); color:#fff; border-radius:10px; transition:border-color .2s ease, transform .06s ease }
.icon-btn:hover{ border-color:#3A465A } .icon-btn:active{ transform: translateY(1px) } .icon-btn.ghost{ background:transparent }

/* Inputs y chips */
.input,.select,.chips{ background:linear-gradient(180deg, #0F131A, #0C1016); color:#F6F8FB; border:1px solid var(--ring); border-radius:10px; padding:12px 14px; width:100% }
.input::placeholder{ color:#758091 } .input:focus-visible{ outline:2px solid var(--accent-line); outline-offset:0 }
.chips{ display:flex; gap:8px; flex-wrap:wrap; padding:8px }
.chip{ border:1px solid var(--ring); border-radius:999px; padding:8px 12px; font-size:12px; background:#141922; color:#c9cdd6; cursor:pointer; transition: border-color .2s ease, background .2s ease, color .2s ease }
.chip:hover{ border-color:#3A465A } .chip.active{ background: var(--accent-soft); border-color: var(--accent); color:#F6F0A4 }

/* Ejercicios */
.exercise-card{ display:flex; gap:12px; align-items:center }
.exercise-card .info{ flex:1 1 auto }
.exercise-card img.thumb{ width:66px; height:66px; object-fit:cover; border-radius:10px; border:1px solid var(--ring) }

/* Series */
.sets{ margin-top:12px; display:flex; flex-direction:column; gap:10px }
.set{ display:grid; grid-template-columns:1fr 1fr auto; gap:10px; align-items:center }
.set input{ background:#0F141B; border:1px solid var(--ring); color:#F6F8FB; border-radius:10px; padding:12px 12px; width:100% }
.set input::placeholder{ color:#7E889A } .set input:focus-visible{ outline:2px solid var(--accent-line) }
.toggle{ display:inline-flex; align-items:center; justify-content:center; width:50px; padding:10px; border-radius:10px; border:1px solid var(--ring); background:#161C25; user-select:none; cursor:pointer; transition: background .2s ease, border-color .2s ease, transform .06s ease }
.toggle .check{ font-weight:900; font-size:14px; line-height:1; color:#8A93A4 }
.toggle:active{ transform: scale(.98) }
.toggle.complete{ background: var(--accent-soft); border-color: var(--accent-line) }
.toggle.complete .check{ color:#ECDD4A }

/* FAB */
.fab{ position: fixed; left:50%; transform: translateX(-50%); bottom:16px; width:60px; height:60px; border-radius:12px; display:grid; place-items:center; border:1px solid var(--line); background: linear-gradient(180deg, var(--accent), var(--accent-2)); color:#20232A; z-index:50; font-weight:900; font-size:22px }

/* Modal */
.modal{ position:fixed; inset:0; display:grid; place-items:center }
.modal.hidden{ display:none }
.modal-backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.60) }
.modal-card{ position:relative; z-index:2; width:min(880px, 96vw); max-height:92vh; overflow:auto; background:linear-gradient(180deg, #121722, #0D111A); border:1px solid var(--ring); border-radius:12px; box-shadow: var(--shadow-soft) }
.modal-header{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--ring) }
.modal-content{ padding:16px }

/* Rest timer (círculo fino) */
.rest-card{ text-align:center }
.rest-title{ margin:4px 0 10px; font-weight:800 }
.rest-circle-wrap{ position:relative; width:160px; height:160px; margin:0 auto 10px }
.rest-svg{ position:absolute; inset:0 }
.rest-bg{ fill:none; stroke:#0F141B; stroke-width:6 }
.rest-fg{ fill:none; stroke:var(--accent); stroke-width:6; stroke-linecap:round; transform: rotate(-90deg); transform-origin: 60px 60px }
.rest-time{ position:absolute; inset:0; display:grid; place-items:center; font-size:28px; font-weight:900; color:#F6F8FB }
.rest-presets{ justify-content:center }
.rest-actions{ margin-top:4px }

/* Varios */
.empty{ text-align:center; padding:44px 12px; border:1px dashed var(--ring); border-radius:var(--r-lg); color:var(--muted); background: linear-gradient(180deg, #10151D, #0C1017) }
.empty .cta{ margin-top:12px } .footer-safe{ height:40px }
.kbd{ font-size:11px; border:1px solid var(--line); padding:2px 6px; border-radius:8px; background:#0F131A; color:#E7EAF0 }
.badge{ display:inline-block; padding:2px 8px; border-radius:999px; background:var(--accent-soft); color:#F7F0A2; border:1px solid var(--accent-line) }
.thumb{ display:grid; place-items:center; color:#B9C0CC; background:#0f141b; border:1px solid var(--ring); width:66px; height:66px; border-radius:10px }

/* Accesibilidad */
button:focus-visible, .icon-btn:focus-visible, .fab:focus-visible, .chip:focus-visible, .input:focus-visible, .nav-btn:focus-visible, .navline-btn:focus-visible{
  outline:2px solid var(--accent-line); outline-offset:2px; border-radius:10px;
}

/* Animaciones */
@keyframes fadeIn { from { opacity:0; transform: translateY(6px) } to { opacity:1; transform: translateY(0) } }
.card, .hero-card, .modal-card { animation: fadeIn .18s ease both }
@keyframes slideInFromRight { from { opacity:.0; transform: translateX(80px) } to { opacity:1; transform: translateX(0) } }
@keyframes slideInFromLeft  { from { opacity:.0; transform: translateX(-80px)} to { opacity:1; transform: translateX(0) } }
@keyframes slideOutToLeft   { from { opacity:1; transform: translateX(0) } to { opacity:.0; transform: translateX(-80px) } }
@keyframes slideOutToRight  { from { opacity:1; transform: translateX(0) } to { opacity:.0; transform: translateX(80px) } }
.slide-enter-right{ animation: slideInFromRight .28s cubic-bezier(.2,.8,.2,1) both }
.slide-enter-left { animation: slideInFromLeft  .28s cubic-bezier(.2,.8,.2,1) both }
.slide-exit-left  { animation: slideOutToLeft   .22s cubic-bezier(.2,.8,.2,1) both }
.slide-exit-right { animation: slideOutToRight  .22s cubic-bezier(.2,.8,.2,1) both }

/* Scrollbar */
@supports selector(::-webkit-scrollbar) {
  ::-webkit-scrollbar{ width:10px; height:10px }
  ::-webkit-scrollbar-track{ background:#0F141B }
  ::-webkit-scrollbar-thumb{ background:#232E3D; border-radius:12px; border:2px solid #0F141B }
  ::-webkit-scrollbar-thumb:hover{ background:#2C394B }
}

/* iOS: inputs */
input[type="number"]{ font-size:16px; -moz-appearance:textfield }
input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0 }