/* Marca de Strongpoint para la plataforma y sus soluciones (Estilo/WEB.md, validado por el PM el 21/10/2026).
   Hoja común servida por el núcleo en /static/plataforma.css: las soluciones (/vusion…) pueden usarla
   para compartir tokens, cabecera y pie. Móvil primero: lo base es para pantallas estrechas y las
   media queries amplían. */

:root {
  --accent: #2832dc;
  --accent-soft: #eaeafc;
  --on-accent: #ffffff;
  --ink: #141e50;
  --ink-2: #4f567c;
  --ink-3: #666d8d;
  --bg: #f4f5fd;
  --surface: #ffffff;
  --surface-2: #eaeafc;
  --line: #d0d2dc;
  --block: #b44128;
  --block-bg: #f8ecea;
  --warn-bg: #ffedbf;
  --warn: #141e50;
  --ok: #1f7a45;
  --ok-bg: #dcf1e3;
  --env-staging: #ffb800;   /* banda de entorno: amarillo de marca con texto negro (12,1 : 1) */
  --f-body: Arial, "Helvetica Neue", Helvetica, sans-serif;
  --f-mono: ui-monospace, Consolas, monospace;
  --r-ctl: 6px;
  --r: 8px;
  --footer-h: 22px;
  color-scheme: light;
}

/* Tema oscuro (decisión propia de WEB.md): por preferencia del sistema salvo que se fuerce el claro,
   o forzado con data-theme="dark". */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --accent: #7b91ff; --accent-soft: #1f2a63; --on-accent: #0b1033;
    --ink: #ffffff; --ink-2: #c4c7d3; --ink-3: #c4c7d3;
    --bg: #0b1033; --surface: #141e50; --surface-2: #1f2a63; --line: #2e3a78;
    --block: #ef8a75; --block-bg: #3a1610; --ok: #6fcf97; --ok-bg: #163826;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --accent: #7b91ff; --accent-soft: #1f2a63; --on-accent: #0b1033;
  --ink: #ffffff; --ink-2: #c4c7d3; --ink-3: #c4c7d3;
  --bg: #0b1033; --surface: #141e50; --surface-2: #1f2a63; --line: #2e3a78;
  --block: #ef8a75; --block-bg: #3a1610; --ok: #6fcf97; --ok-bg: #163826;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body {
  font: 16px/1.45 var(--f-body);
  min-height: 100vh;
  padding-bottom: calc(var(--footer-h) + env(safe-area-inset-bottom, 0px));
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}
h1, h2, h3 { font-weight: 700; margin: 0 0 8px; }
h1 { font-size: 22px; }
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Contenedor de página: 16 px de margen lateral en móvil, más las zonas seguras. */
.wrap {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

/* Cabecera: logo | Plataforma a la izquierda; a la derecha, el aviso de entorno (y, con el login, el
   usuario, el rol y cerrar sesión). El menú de las soluciones irá en una segunda fila. */
header.top {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  padding-top: env(safe-area-inset-top, 0px);
}
.bar { display: flex; align-items: center; min-height: 48px; }
/* Logo de Strongpoint: 20 px de alto en móvil (22 en escritorio), con 9 px de respeto y separador. */
.sp-logo { display: inline-flex; align-items: center; padding: 4px 9px 4px 0; line-height: 0; flex: none; }
.sp-logo img { height: 20px; width: auto; display: block; }
.sp-logo .logo-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sp-logo .logo-light { display: none; }
  :root:not([data-theme="light"]) .sp-logo .logo-dark { display: block; }
}
:root[data-theme="dark"] .sp-logo .logo-light { display: none; }
:root[data-theme="dark"] .sp-logo .logo-dark { display: block; }
.sp-sep { width: 1px; height: 24px; background: var(--line); margin-right: 9px; flex: none; }
.brand { font-weight: 700; font-size: 17px; white-space: nowrap; }
.env-tag {
  margin-left: auto;
  min-width: 0;
  padding-left: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.env-tag:empty { display: none; }
@media (max-width: 479px) { .env-tag .env-long { display: none; } }

main.wrap { padding-top: 16px; padding-bottom: 16px; }
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 16px;
}
.card p { margin: 0; color: var(--ink-2); }

/* Pie con la versión desplegada (como el TimeTracker #118): «Versión 1.0.0 (a1b2c3d · 202611031200) · staging». */
.app-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  min-height: var(--footer-h);
  line-height: var(--footer-h);
  padding: 0 16px env(safe-area-inset-bottom, 0px);
  background: var(--bg);
  border-top: 1px solid var(--line);
  color: var(--ink-3);
  font-size: 11px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-footer:empty { display: none; }

/* Staging: la cabecera y el pie en amarillo, con texto negro y el logo azul (como el TimeTracker #182). */
body.env-staging header.top,
body.env-staging .app-footer { background: var(--env-staging); border-color: rgba(0, 0, 0, .18); color: #0b0b0b; }
body.env-staging .sp-sep { background: rgba(0, 0, 0, .3); }
body.env-staging .sp-logo .logo-light { display: block; }
body.env-staging .sp-logo .logo-dark { display: none; }

@media (min-width: 720px) {
  .sp-logo img { height: 22px; }
  .brand { font-size: 20px; }
  .env-tag { font-size: 12px; }
  main.wrap { padding-top: 24px; }
  .card { padding: 24px; }
  h1 { font-size: 26px; }
}