/* web.css — what the site adds to swiss.css (copied verbatim from lab/06-swiss_ui; change it there first).
   The header's middle cell is the home link and its right cell the language and the account. */

/* Header: back left, Ciserex centred, language and account right. */
body > header > a[rel="home"] { justify-self: center; }
body > header > nav { justify-self: end; display: flex; align-items: center; gap: 0.6rem; font-size: clamp(0.8rem, 2dvh, 0.9rem); white-space: nowrap; }
body > header > nav [role="group"] { display: inline-flex; }
body > header > nav [data-lang] { padding: 0.15em 0.55em; border: 1px solid #424245; margin-left: -1px; background: none; color: var(--bar-ink-2);
  font: 600 0.8em/1.2 var(--sans); letter-spacing: 0.08em; cursor: pointer; }
body > header > nav [data-lang]:first-child { margin-left: 0; border-radius: 6px 0 0 6px; }
body > header > nav [data-lang]:last-child { border-radius: 0 6px 6px 0; }
body > header > nav [data-lang][aria-pressed="true"] { position: relative; border-color: var(--bar-ink); background: var(--bar-ink); color: var(--bar); }
body > header > nav .cuenta { display: flex; align-items: center; gap: 0.2rem; }
body > header > nav .entrar, body > header > nav .usuario { display: inline-flex; align-items: center; gap: 0.35em; padding: 0.2em 0.7em; border: 0; border-radius: 999px;
  background: none; color: var(--link-on-bar); font: inherit; cursor: pointer; }
body > header > nav .entrar:hover, body > header > nav .usuario:hover { background: rgb(255 255 255 / 0.12); }
body > header > nav .entrar:disabled { opacity: 0.6; cursor: default; }
body > header > nav .entrar .ti { font-size: 1.15em; }
body > header > nav .usuario { color: var(--bar-ink); }
body > header > nav .usuario img { width: 1.4em; height: 1.4em; border-radius: 50%; }
body > header > nav .usuario span { max-width: 12rem; overflow: hidden; text-overflow: ellipsis; }
body > header > nav .icono { width: 1.8rem; height: 1.8rem; color: var(--bar-ink-2); }
body > header > nav .icono:hover:not(:disabled) { background: rgb(255 255 255 / 0.12); color: var(--bar-ink); }
body > header :focus-visible { outline: 2px solid var(--link-on-bar); outline-offset: 2px; }
body > footer small[data-error] { color: #ff6961; }

/* The launcher's lede sits under the title as on the other sheets. */
#launcher > .lede { flex: none; }

/* A module card: its pads fill the adjustments column, one hairline row each. */
.pipeline .pads { grid-area: ajustes; min-width: 0; }
.pipeline .pads h3 { margin-bottom: 0.3rem; color: var(--ink-3); font-size: var(--h6); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.pipeline .pads ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.25rem; }
.pipeline .pads li { overflow: hidden; padding-block: 0.4rem 0.45rem; border-top: 1px solid var(--rule); font-size: var(--small); text-overflow: ellipsis; white-space: nowrap; }
.pipeline dl { grid-template-columns: minmax(0, 1fr); }
.pipeline dd code, .cifras dd code { overflow-wrap: anywhere; font-size: var(--small); font-weight: 500; letter-spacing: 0; }
code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.92em; }
.tabla td code { color: var(--ink-2); white-space: nowrap; }

@media (max-width: 640px) {
  body > header { grid-template-columns: auto minmax(0, 1fr) auto; }
  body > header > nav .entrar span:not(.ti), body > header > nav .usuario span:not(.ti) { display: none; }
  .pipeline .pads ul { grid-template-columns: minmax(0, 1fr); }
}