/* Simple mode (js/simple-mode/, Santi 2026-10-12): button menus, the mode
   question and the step-by-step profile wizard. Theme tokens only. */

/* ── What simple mode removes: side menu, header buttons, bottom bar ── */
body.tl-sencillo #hdrMenuBtn,
body.tl-sencillo #hdrRapidoBtn,
body.tl-sencillo #hdrAyudaBtn,
body.tl-sencillo #hdrPerfil,
body.tl-sencillo #hdrReloadBtn,
body.tl-sencillo #backupBtn,
body.tl-sencillo #bottomNav,
body.tl-sencillo #installBanner,
/* No app lock in simple mode: no fingerprint or Face ID friction (Santi, 2026-10-12). */
body.tl-sencillo #seg-card-lock { display: none !important; }
/* «Back» in the header on every option screen; the menus carry their own,
   and the main menu and the profile creation have none. */
body.tl-sencillo:not(.tl-sencillo-menu):not(.tl-profile-locked):not(.tl-pre-perfil) #hdrBackBtn { display: inline-flex !important; }
body.tl-sencillo.tl-sencillo-menu #hdrBackBtn,
body.tl-sencillo.tl-profile-locked #hdrBackBtn { display: none !important; }

/* On a phone the header takes two rows (buttons, then the title). Simple mode
   keeps only «Back», so one row: Back on the left, the title centred
   (Santi, 2026-10-12). The right column mirrors the left one so the title
   stays truly centred. */
@media (max-width: 599px) {
  body.tl-sencillo header.app-hdr {
    grid-template-columns: 48px minmax(0, 1fr) 48px;
    grid-template-areas: "izq tit der";
    align-items: center;
  }
}

/* ── The menus ── */
#view-sencillo { padding: 0 16px; }
/* The page fills the screen under the header (`--sen-alto`, set by
   simple-menus.js): settings on top, buttons centred, footer at the bottom. */
.sen-pagina {
  display: flex;
  flex-direction: column;
  min-height: var(--sen-alto, 80vh);
  padding-top: 16px;
  box-sizing: border-box;
}
.sen-ajustes { display: flex; justify-content: center; margin: 0 0 12px; }
.sen-centro { flex: 1 0 auto; display: flex; align-items: center; justify-content: center; padding: 12px 0; }
.sen-rejilla { display: grid; gap: 14px; width: 100%; margin: 0 auto; }
/* Up to four: two by two, bigger. */
/* `minmax(0, 1fr)`: a long word must never widen a column past the screen
   (seen with the largest text size on a narrow phone). */
.sen-pocos { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 440px; }
.sen-btn { min-width: 0; }
.sen-pocos .sen-btn { min-height: 160px; padding: 16px 4px; font-size: 18px; }
.sen-pocos .sen-ico svg { width: 52px; height: 52px; }
/* Five or more: two per row on a phone (bigger, and «Buscar actualizaciones»
   fits without cutting a word), three from tablet width. */
.sen-muchos { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 440px; }
.sen-muchos .sen-btn { min-height: 120px; font-size: 16px; }
.sen-muchos .sen-ico svg { width: 40px; height: 40px; }
@media (min-width: 600px) {
  .sen-muchos { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 600px; }
}
/* In two columns, a last button left alone in its row goes in the middle. */
.sen-pocos > .sen-btn:last-child:nth-child(odd) {
  grid-column: 1 / -1; justify-self: center; width: calc(50% - 7px);
}
@media (max-width: 599px) {
  .sen-muchos > .sen-btn:last-child:nth-child(odd) {
    grid-column: 1 / -1; justify-self: center; width: calc(50% - 7px);
  }
}
/* The registration code on top of every menu. */
.sen-matricula {
  margin: 0 0 14px;
  font-family: "Oswald", sans-serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--accent);
  text-align: center;
  overflow-wrap: anywhere;
}
/* Only the copyright line, no divider (Santi, 2026-10-12). */
.sen-pie { padding: 16px 0; font-size: 12px; color: var(--muted); }
.sen-pie .df-meta { display: flex; justify-content: space-between; gap: 12px; }
.sen-pie .footer-ver { position: static; }
.sen-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 112px;
  padding: 14px 8px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.sen-btn:hover { border-color: var(--accent); }
.sen-btn:active { background: var(--surface-soft); }
.sen-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sen-ico { display: flex; color: var(--accent); }
.sen-ico svg { width: 36px; height: 36px; }
.sen-txt { overflow-wrap: break-word; hyphens: auto; }
.sen-volver { background: transparent; border-style: dashed; }
.sen-volver .sen-ico { color: var(--text); }
.sen-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 24px;
}
.sen-completa {
  display: block;
  width: 100%;
  max-width: 440px;
  min-height: 48px;
  margin: 8px auto 0;
  padding: 0 16px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--muted);
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
}
.sen-completa:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The «Simple mode» switch under Appearance, in the complete app. */
.sen-cajon-btn { width: 100%; margin-top: 12px; }

/* ── The mode question and the wizard: only the title in the header ── */
body.tl-pre-perfil #hdrAyudaBtn,
body.tl-pre-perfil #hdrMenuBtn,
body.tl-pre-perfil #hdrRapidoBtn,
body.tl-pre-perfil #hdrReloadBtn,
body.tl-pre-perfil #hdrBackBtn,
body.tl-pre-perfil #hdrPerfil { display: none !important; }

/* ── The mode question: two big buttons, centred on the screen ── */
#view-modo-elegir { padding: 24px 16px; }
.sen-elegir {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  max-width: 520px;
  min-height: calc(100dvh - 160px);
  margin: 0 auto;
}
.sen-modo {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 16px;
  row-gap: 8px;
  align-items: center;
  padding: 28px 20px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  color: var(--text);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s;
}
.sen-modo:hover { border-color: var(--accent); }
.sen-modo:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sen-modo-ico { grid-row: 1 / span 2; display: flex; color: var(--accent); }
.sen-modo-ico svg { width: 48px; height: 48px; }
.sen-modo-tit { font-family: "Oswald", sans-serif; font-size: 24px; font-weight: 600; letter-spacing: 0.5px; }
.sen-modo-txt { font-size: 16px; line-height: 1.5; color: var(--muted); }

/* ── The profile wizard ── */
#view-perfil-asistente { padding: 16px; }
.asis { max-width: 480px; margin: 0 auto; }
.asis-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.asis-paso { font-size: 14px; color: var(--muted); white-space: nowrap; }
.asis-aceptar { width: auto; flex: 0 0 auto; min-height: 44px; padding: 0 24px; }
.asis-aceptar[aria-disabled="true"] { opacity: 0.45; }
.asis-barra { height: 6px; margin: 12px 0 24px; background: var(--surface2); border-radius: 999px; overflow: hidden; }
.asis-barra span { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width 0.2s; }
/* Keeps «Back / Next» from jumping up and down between short and long steps. */
.asis-cuerpo { min-height: 200px; }
.asis-preg { font-family: "Oswald", sans-serif; font-size: 24px; font-weight: 600; color: var(--text); margin: 0 0 12px; }
.asis-ayuda { font-size: 14px; line-height: 1.5; color: var(--muted); margin: 0 0 16px; }
.asis-input { width: 100%; font-size: 18px; min-height: 52px; }
.asis-num { max-width: 160px; letter-spacing: 2px; }
.asis-elegir {
  width: 100%;
  min-height: 56px;
  padding: 0 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-family: inherit;
  font-size: 18px;
  text-align: left;
  cursor: pointer;
}
.asis-elegir.vacio { color: var(--muted); }
.asis-elegir:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.asis-recuperar {
  display: block;
  min-height: 44px;
  margin-top: 20px;
  padding: 0 4px;
  background: none;
  border: none;
  color: var(--accent);
  font-family: inherit;
  font-size: 14px;
  text-decoration: underline;
  cursor: pointer;
}
.asis-recuperar:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.asis-ops { display: flex; flex-direction: column; gap: 10px; }
.asis-op {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-height: 52px;
  padding: 12px 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-family: inherit;
  font-size: 16px;
  text-align: left;
  cursor: pointer;
}
.asis-op.sel { border: 2px solid var(--accent); background: var(--surface-soft); }
.asis-op:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.asis-op-t { font-weight: 600; }
.asis-op-h { font-size: 13px; color: var(--muted); line-height: 1.4; }
.asis-chk { margin-top: 16px; }
.asis-pie { display: flex; justify-content: space-between; gap: 12px; margin-top: 28px; }
.asis-pie .btn-primary, .asis-pie .btn-secondary { min-height: 48px; flex: 1 1 0; }
.asis-pie > span:empty { display: none; }

/* ── The welcome screen after creating the profile ── */
.fin { text-align: center; padding-top: 8px; }
.fin-sello {
  width: 80px; height: 80px; margin: 0 auto 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--success); background: var(--surface-soft); border: 1px solid var(--border);
}
.fin-sello svg { width: 48px; height: 48px; }
.fin-titulo {
  font-family: "Oswald", sans-serif; font-size: 24px; font-weight: 600;
  color: var(--text); margin: 0 0 10px; outline: none;
}
.fin-lead { font-size: 16px; line-height: 1.5; color: var(--text); margin: 0 0 18px; }
.fin-formas { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 10px; text-align: left; }
.fin-forma {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  font-size: 16px; line-height: 1.45; color: var(--text);
}
.fin-forma-ico { flex: 0 0 auto; display: flex; color: var(--accent); }
.fin-forma-ico svg { width: 32px; height: 32px; }
.fin-btns { display: flex; flex-direction: column; gap: 12px; }
.fin-btns .btn-primary, .fin-btns .btn-secondary { width: 100%; min-height: 52px; font-size: 16px; }

@media (prefers-reduced-motion: reduce) {
  .sen-btn, .sen-modo, .asis-barra span { transition: none; }
}