/* ─────────────────────────────────────────────────────────────────────────
   lookup.css — Página de lookup de pronunciación
   Inherita variables y tipografías de style.css.
   ───────────────────────────────────────────────────────────────────────── */

.header-nav { display:flex; align-items:center; gap:14px; }
.header-nav-link { font-family:'Nunito Sans',sans-serif; font-weight:700; font-size:0.78rem; color:var(--cream); text-decoration:none; padding:7px 14px; border:1px solid #444; border-radius:6px; transition:all 0.2s; white-space:nowrap; }
.header-nav-link:hover { border-color:var(--gold); color:var(--gold); }

.lookup-hero { background:var(--ink); color:var(--cream); padding:56px 24px 40px; text-align:center; position:relative; overflow:hidden; }
.lookup-hero::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 0%, rgba(212,151,58,0.18) 0%, transparent 70%); }
.lookup-eyebrow { font-family:'Nunito Sans',sans-serif; font-size:0.7rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--gold); margin-bottom:14px; position:relative; }
.lookup-hero h1 { font-family:'Nunito Sans',sans-serif; font-weight:800; font-size:clamp(2rem,5vw,3.2rem); line-height:1.05; letter-spacing:-0.03em; margin-bottom:14px; position:relative; }
.lookup-hero h1 span { color:var(--accent); }
.lookup-hero .lookup-sub { font-style:italic; color:#bbb; font-size:1.02rem; max-width:580px; margin:0 auto; position:relative; line-height:1.6; }

.lookup-tool { max-width:760px; margin:36px auto 56px; padding:0 24px; }
.lookup-form { display:flex; gap:10px; margin-bottom:10px; }
.lookup-input { flex:1; font-family:'Nunito Sans',system-ui,sans-serif; font-size:1.15rem; padding:14px 18px; border:2px solid #ddd; border-radius:10px; background:white; outline:none; transition:border 0.18s; }
.lookup-input:focus { border-color:var(--accent); }
.lookup-btn { font-family:'Nunito Sans',sans-serif; font-weight:700; font-size:0.95rem; background:var(--accent); color:white; border:none; border-radius:10px; padding:0 26px; cursor:pointer; transition:background 0.2s; }
.lookup-btn:hover { background:#a83520; }
.lookup-status { font-family:'Nunito Sans',sans-serif; font-size:0.78rem; color:var(--muted); letter-spacing:0.04em; min-height:18px; margin-bottom:18px; }

.lookup-card { background:var(--card); border-radius:14px; padding:28px 26px 24px; box-shadow:0 2px 16px rgba(0,0,0,0.06); border:1px solid #eee; position:relative; margin-bottom:24px; }
.lookup-word { font-family:'Nunito Sans',sans-serif; font-weight:800; font-size:2rem; letter-spacing:-0.02em; color:var(--ink); margin-bottom:6px; padding-right:120px; }
.lookup-listen { position:absolute; top:24px; right:22px; font-family:'Nunito Sans',sans-serif; font-weight:700; font-size:0.82rem; background:var(--ink); color:var(--cream); border:none; border-radius:8px; padding:9px 16px; cursor:pointer; transition:background 0.2s; }
.lookup-listen:hover { background:var(--accent); }

.lookup-row-main { margin:14px 0 20px; padding:18px 20px; background:linear-gradient(180deg, #fff8ec 0%, #fff 100%); border:1px solid #f0e6cf; border-radius:10px; }
.lookup-respelling { font-family:'Nunito Sans',system-ui,sans-serif; font-weight:700; font-size:1.9rem; color:var(--accent); letter-spacing:0.01em; line-height:1.25; }

.lookup-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:14px 18px; margin-bottom:18px; }
.lookup-field {}
.lookup-label { font-family:'Nunito Sans',sans-serif; font-size:0.66rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); margin-bottom:5px; font-weight:700; }
.lookup-value { font-family:'Nunito Sans',system-ui,sans-serif; font-size:1.02rem; color:var(--ink); line-height:1.4; word-break:break-word; }
.lookup-ipa { font-family:'Charis SIL','Doulos SIL','Times New Roman',serif; font-size:1.18rem; }
.lookup-arpa { font-family:'JetBrains Mono','Menlo','Consolas',monospace; font-size:0.92rem; color:#444; }

.lookup-rhymes { padding-top:14px; border-top:1px dashed #e8e0d4; }
.lookup-rhymes .lookup-value { display:flex; flex-wrap:wrap; gap:8px; }
.rhyme-chip { background:var(--warm); border:1px solid #e0d4bd; color:var(--ink); padding:5px 12px; border-radius:18px; font-size:0.9rem; cursor:pointer; transition:all 0.15s; }
.rhyme-chip:hover { background:var(--gold); color:white; border-color:var(--gold); }

.diff-meter { display:inline-flex; gap:3px; align-items:center; vertical-align:middle; margin-left:8px; }
.diff-dot { width:10px; height:10px; border-radius:50%; background:#ddd; }
.diff-dot.on { background:var(--accent); }

.lookup-missing { text-align:center; padding:36px 28px; }
.lookup-miss-emoji { font-size:2.8rem; margin-bottom:10px; }
.lookup-miss-title { font-family:'Nunito Sans',sans-serif; font-weight:700; font-size:1.25rem; margin-bottom:8px; }
.lookup-miss-text { color:var(--muted); font-size:0.98rem; max-width:480px; margin:0 auto; }

.lookup-examples { margin-top:18px; }
.lookup-examples-label { font-family:'Nunito Sans',sans-serif; font-size:0.7rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.lookup-examples-list { display:flex; flex-wrap:wrap; gap:8px; }
.example-chip { background:white; border:1px solid #ddd; color:var(--ink); padding:6px 14px; border-radius:18px; font-size:0.88rem; cursor:pointer; font-family:'Nunito Sans',sans-serif; font-weight:600; transition:all 0.15s; }
.example-chip:hover { background:var(--ink); color:var(--cream); border-color:var(--ink); }

@media (max-width: 600px) {
  .lookup-word { font-size:1.6rem; padding-right:110px; }
  .lookup-respelling { font-size:1.55rem; }
  .lookup-listen { top:20px; right:18px; padding:8px 12px; font-size:0.76rem; }
}