/* Formulador · paleta "laboratorio limpio" (acento verde azulado, apoyo ámbar). Contrastes verificados (AA). */
:root {
  --bg: #F7FAF9;
  --surface: #FFFFFF;
  --text: #12312E;
  --muted: #4A6764;
  --border: #D3E2DF;
  --accent: #0F8B7D;        /* detalles y títulos grandes */
  --accent-fill: #0D7F72;   /* relleno de botones: con texto blanco da 4,9:1 */
  --accent-ink: #FFFFFF;
  --accent-text: #0B6F64;   /* acento como texto */
  --warm: #E8A33D;
  --warm-ink: #3A2504;
  --error: #C8453B;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0F1B1A;
    --surface: #162726;
    --text: #E4F1EF;
    --muted: #9BB8B4;
    --border: #284240;
    --accent: #3CC6B5;
    --accent-fill: #3CC6B5;
    --accent-ink: #0F1B1A;
    --accent-text: #3CC6B5;
    --warm: #F2B960;
    --warm-ink: #2A1B04;
    --error: #F07A6F;
    color-scheme: dark;
  }
}

.muted { color: var(--muted); font-size: 0.9rem; }
.top { display: flex; align-items: center; gap: 12px; padding: 8px 0 12px; }
.logo { border-radius: 10px; }
h1 { font-size: 1.5rem; line-height: 1.2; color: var(--accent-text); }
.tagline { color: var(--muted); font-size: 0.95rem; }
.intro { color: var(--muted); margin-bottom: 14px; }

h2 { font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }

/* Campo de búsqueda */
#form { position: relative; }
.field { position: relative; }
#q {
  width: 100%; min-height: 52px; padding: 0 48px 0 16px; font-size: 1.125rem;
  background: var(--surface); color: var(--text); border: 2px solid var(--border); border-radius: 14px;
}
#q:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }
.clear {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border: 0; background: transparent; color: var(--muted); font-size: 1.5rem; line-height: 1;
}
.clear[hidden] { display: none; }
.sugs {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 5;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.12);
}
.sugs[hidden] { display: none; }
.sugs button { width: 100%; min-height: 44px; padding: 0 16px; text-align: left; background: transparent; border: 0; border-bottom: 1px solid var(--border); }
.sugs li:last-child button { border-bottom: 0; }
.sugs button:hover, .sugs button:focus-visible { background: color-mix(in srgb, var(--accent) 12%, transparent); }

.examples { margin: 12px 0 4px; display: flex; flex-direction: column; gap: 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* Resultado */
.results { margin-top: 16px; display: flex; flex-direction: column; gap: 14px; }
.results:empty { display: none; }
.result { display: flex; flex-direction: column; gap: 16px; }
.result-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.formula { font-size: 2rem; line-height: 1.2; font-weight: 700; margin-bottom: 6px; overflow-wrap: anywhere; }
.btn.small { min-height: 36px; padding: 0 12px; font-size: 0.875rem; white-space: nowrap; }
.note { color: var(--muted); font-size: 0.9rem; }

.names { display: flex; flex-direction: column; gap: 10px; }
.name-row { display: grid; grid-template-columns: 7rem 1fr; gap: 4px 12px; align-items: baseline; }
.name-row dt { color: var(--muted); font-size: 0.9rem; }
.name-row .main { font-weight: 600; font-size: 1.0625rem; overflow-wrap: anywhere; }
.name-row .alts { display: block; color: var(--muted); font-size: 0.85rem; }
@media (max-width: 420px) { .name-row { grid-template-columns: 1fr; } }

.ox { margin-bottom: 4px; }
.ox-value { display: inline-block; min-width: 3rem; padding: 2px 12px; border-radius: 10px; background: var(--warm); color: var(--warm-ink); font-size: 1.5rem; font-weight: 700; text-align: center; }
.calc { color: var(--muted); overflow-wrap: anywhere; }
.eq { font-size: 1.125rem; margin-top: 4px; overflow-wrap: anywhere; }
.steps { padding-left: 1.25rem; list-style: decimal; display: flex; flex-direction: column; gap: 8px; }
details summary { cursor: pointer; font-weight: 600; color: var(--accent-text); min-height: 32px; display: flex; align-items: center; }
.rules { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; list-style: disc; padding-left: 1.25rem; color: var(--muted); }

.unknown h2 { color: var(--error); }
.unknown .chips { margin-top: 8px; }

/* Explorar */
.explorer { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; }
.filter-row { display: flex; align-items: center; gap: 12px; margin: 10px 0; flex-wrap: wrap; }
.filter { flex: 1 1 12rem; min-height: 44px; padding: 0 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
.list { max-height: 24rem; overflow: auto; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.list button { width: 100%; min-height: 44px; display: flex; gap: 12px; align-items: baseline; padding: 6px 14px; text-align: left; background: transparent; border: 0; border-bottom: 1px solid var(--border); }
.list li:last-child button { border-bottom: 0; }
.list button:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.list .f { font-weight: 700; min-width: 5.5rem; }
.list .n { color: var(--muted); }

.foot { margin: 32px 0 16px; display: flex; flex-direction: column; gap: 6px; }