/* =========================================================
   RELOJ 181 — css/lado.css
   La barra de la izquierda (abajo en el celular). Es la misma en todas las
   páginas nuevas y en /agenda, por eso vive sola y trae sus propios colores.
   La arma lado_html() en build.py; cada icono es una página.
   ========================================================= */

.lado {
  --l-tinta: #14170F;
  --l-papel: #FBF8F3;
  position: fixed; z-index: 60; inset: 0 auto 0 0; width: 76px;
  display: flex; flex-direction: column; align-items: stretch;
  background: var(--l-papel); border-right: 1px solid rgba(20, 23, 15, .14);
  font-family: "Karla", system-ui, sans-serif;
}
body.con-lado { padding-left: 76px; }

.lado-logo { display: grid; place-items: center; height: 64px; color: var(--l-tinta); }
.lado-logo svg { width: 30px; height: 30px; }
.lado-iconos { display: flex; flex-direction: column; gap: 4px; margin-top: 18vh; }
.lado-iconos a, .lado-cuenta {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 9px 2px 8px; color: var(--l-tinta); opacity: .55; text-decoration: none;
  transition: opacity .2s;
}
.lado-iconos a::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px;
  background: var(--l-tinta); transform: scaleY(0); transition: transform .25s;
}
.lado-iconos a:hover, .lado-cuenta:hover, .lado a.on { opacity: 1; }
.lado-iconos a.on::before { transform: scaleY(1); }
.lado a.on svg { fill: currentColor; }
.lado svg { width: 22px; height: 22px; flex: none; }
.lado-iconos span, .lado-cuenta span {
  font: 10px/1 "Space Mono", ui-monospace, monospace; letter-spacing: -.01em; white-space: nowrap;
}
.lado a.on span { font-weight: 700; }
.lado-cuenta { margin-top: auto; margin-bottom: 14px; }

@media (max-width: 760px) {
  .lado {
    inset: auto 0 0 0; width: 100%; height: 62px; flex-direction: row; align-items: center;
    border-right: 0; border-top: 1px solid rgba(20, 23, 15, .14); padding: 0 2px;
    padding-bottom: env(safe-area-inset-bottom);
  }
  body.con-lado { padding-left: 0; padding-bottom: 62px; }
  .lado-logo { display: none; }
  .lado-iconos { flex: 6; margin: 0; flex-direction: row; gap: 0; justify-content: space-around; }
  .lado-iconos a, .lado-cuenta { flex: 1; padding: 8px 0 7px; gap: 4px; }
  .lado-iconos a::before { left: 20%; right: 20%; top: -1px; bottom: auto; width: auto; height: 3px; transform: scaleX(0); }
  .lado-iconos a.on::before { transform: scaleX(1); }
  .lado-cuenta { margin: 0; }
  .lado svg { width: 21px; height: 21px; }
  .lado-iconos span, .lado-cuenta span { font-size: 8.5px; }
}