/* Hoja de estilo de la web de LGM-OS.
 *
 * NO es un diseño nuevo: son los mismos tokens del panel (frontend/src/index.css) —el azul
 * de acción, el cristal, el fondo, las sombras y las pegatinas— para que quien llega a la
 * web y luego instala el sistema reconozca lo que ve. Si el panel cambia de color, aquí
 * hay que cambiarlo también: son dos archivos, y esto está escrito para que se note.
 *
 * Sin librerías a propósito: el panel usa Tailwind, pero una página estática que solo
 * necesita seis componentes no justifica arrastrar un compilador ni pedirle una hoja de
 * 3000 clases a un servidor ajeno. Lo que sí se copia literal son los valores.
 */

/* ---------------------------------------------------------- tokens (del panel) */

:root {
  color-scheme: light;
  /* Un solo azul para todo lo que es «acción»: botones, foco, enlaces y selección. */
  --acento: #2563eb;
  --acento-fuerte: #1d4ed8;
  --acento-suave: rgba(37, 99, 235, 0.14);
  --borde: rgba(15, 23, 42, 0.09);
  --sombra-corta: 0 1px 2px rgba(15, 23, 42, 0.06);
  --sombra-media: 0 8px 24px -12px rgba(15, 23, 42, 0.28);
  --sombra-larga: 0 24px 56px -20px rgba(15, 23, 42, 0.35);

  --texto: #1e293b;
  --texto-fuerte: #0f172a;
  --texto-suave: #475569;
  --texto-tenue: #64748b;
  --cristal: rgba(255, 255, 255, 0.72);
  --cristal-borde: rgba(255, 255, 255, 0.55);
  --cristal-panel: rgba(255, 255, 255, 0.5);
  --codigo-fondo: #0f172a;
}

[data-theme="dark"] {
  color-scheme: dark;
  /* Los mismos tokens en su versión oscura, igual que en el panel. */
  --acento: #3b82f6;
  --acento-fuerte: #2563eb;
  --acento-suave: rgba(59, 130, 246, 0.25);
  --borde: rgba(148, 163, 184, 0.22);
  --sombra-corta: 0 1px 2px rgba(0, 0, 0, 0.35);
  --sombra-media: 0 8px 24px -12px rgba(0, 0, 0, 0.7);
  --sombra-larga: 0 24px 56px -20px rgba(0, 0, 0, 0.75);

  --texto: #cbd5e1;
  --texto-fuerte: #e2e8f0;
  --texto-suave: #94a3b8;
  --texto-tenue: #7c8aa0;
  --cristal: rgba(15, 23, 42, 0.55);
  --cristal-borde: rgba(148, 163, 184, 0.25);
  --cristal-panel: rgba(30, 41, 59, 0.45);
  --codigo-fondo: #060b16;
}

* { box-sizing: border-box; }

/* ---------------------------------------------------------- fondo y tipografía */

body {
  margin: 0;
  min-height: 100vh;
  color: var(--texto);
  font-family: "SF Pro Display", Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* Un pelo más apretado que el de fábrica, como en el panel. */
  letter-spacing: -0.006em;
  -webkit-text-size-adjust: 100%;
  /* El mismo fondo del escritorio del panel: luz tranquila y el color lo pone el
     contenido, no el fondo. */
  background:
    radial-gradient(ellipse 90% 70% at 12% 0%, rgba(99, 132, 199, 0.22), transparent 62%),
    radial-gradient(ellipse 80% 60% at 88% 8%, rgba(129, 140, 202, 0.18), transparent 62%),
    radial-gradient(ellipse 100% 60% at 50% 100%, rgba(100, 150, 170, 0.16), transparent 68%),
    linear-gradient(165deg, #eef2f8 0%, #e8ecf5 45%, #e6eef1 100%);
  background-attachment: fixed;
}

[data-theme="dark"] body {
  background:
    radial-gradient(ellipse 90% 70% at 12% 0%, rgba(37, 99, 235, 0.18), transparent 62%),
    radial-gradient(ellipse 80% 60% at 88% 8%, rgba(99, 102, 241, 0.14), transparent 62%),
    radial-gradient(ellipse 100% 60% at 50% 100%, rgba(13, 148, 136, 0.12), transparent 68%),
    linear-gradient(165deg, #0b1220 0%, #111827 50%, #0f1a1f 100%);
  background-attachment: fixed;
}

h1, h2, h3, h4 { letter-spacing: -0.018em; color: var(--texto-fuerte); }

/* Las cifras, en columna: en un NAS casi todo lo que se lee son tamaños y fechas. */
table, td, th, time, code, .tabular { font-variant-numeric: tabular-nums; }

.envoltorio { max-width: 940px; margin: 0 auto; padding: 0 20px 72px; }

/* ---------------------------------------------------------- cristal */

.glass {
  background: var(--cristal);
  backdrop-filter: blur(22px) saturate(130%);
  -webkit-backdrop-filter: blur(22px) saturate(130%);
  border: 1px solid var(--cristal-borde);
  border-radius: 16px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 0 0 1px rgba(15, 23, 42, 0.05),
    var(--sombra-larga);
}

[data-theme="dark"] .glass {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(255, 255, 255, 0.03),
    0 24px 60px -12px rgba(0, 0, 0, 0.6);
}

.glass-panel {
  background: var(--cristal-panel);
  backdrop-filter: blur(14px) saturate(125%);
  -webkit-backdrop-filter: blur(14px) saturate(125%);
  border: 1px solid var(--cristal-borde);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

[data-theme="dark"] .glass-panel { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); }

.panel { padding: 20px 22px; margin-bottom: 14px; }

/* ---------------------------------------------------------- cabecera */

header.principal { padding: 52px 0 30px; }

.barra-superior {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 26px;
}

.marca {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--texto-fuerte);
  text-decoration: none;
}



.entradilla {
  margin: 18px 0 0;
  font-size: 18px;
  color: var(--texto-suave);
  max-width: 64ch;
}

/* ---------------------------------------------------------- pegatinas (chips) */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.15rem;
  white-space: nowrap;
}

.chip-blue  { color: #1d4ed8; background: rgba(37, 99, 235, 0.12); }
.chip-amber { color: #b45309; background: rgba(217, 119, 6, 0.14); }
.chip-slate { color: #475569; background: rgba(71, 85, 105, 0.12); }

[data-theme="dark"] .chip-blue  { color: #93c5fd; background: rgba(59, 130, 246, 0.18); }
[data-theme="dark"] .chip-amber { color: #fcd34d; background: rgba(245, 158, 11, 0.18); }
[data-theme="dark"] .chip-slate { color: #cbd5e1; background: rgba(148, 163, 184, 0.18); }

/* ---------------------------------------------------------- botones */

.btn-primary, .btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 8px;
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25rem;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* Se hunden un píxel al pulsar, como los del panel. */
.btn-primary:active, .btn-secondary:active, .cambiar-tema:active { transform: translateY(1px); }

.btn-primary {
  background: var(--acento);
  color: #fff;
  box-shadow: var(--sombra-corta);
}
.btn-primary:hover { background: var(--acento-fuerte); }

.btn-secondary {
  color: var(--texto-suave);
  background: rgba(255, 255, 255, 0.72);
  border-color: var(--borde);
  box-shadow: var(--sombra-corta);
}
.btn-secondary:hover { background: #fff; border-color: rgba(15, 23, 42, 0.16); color: var(--texto-fuerte); }

[data-theme="dark"] .btn-secondary { background: rgba(30, 41, 59, 0.6); }
[data-theme="dark"] .btn-secondary:hover { background: rgba(51, 65, 85, 0.75); border-color: rgba(148, 163, 184, 0.35); }

nav.principal { display: flex; flex-wrap: wrap; gap: 10px; }

/* El interruptor de tema, redondo como los iconos de acción del panel. */
.cambiar-tema {
  margin-left: auto;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 999px;
  border: 1px solid var(--borde);
  background: rgba(255, 255, 255, 0.72);
  color: var(--texto-suave);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.cambiar-tema:hover { background: rgba(37, 99, 235, 0.1); color: var(--acento-fuerte); }
[data-theme="dark"] .cambiar-tema { background: rgba(30, 41, 59, 0.6); }
[data-theme="dark"] .cambiar-tema:hover { background: rgba(59, 130, 246, 0.22); color: #dbeafe; }
.cambiar-tema svg { width: 17px; height: 17px; }
/* Cada tema enseña el icono del OTRO: es a lo que se va a cambiar. */
.cambiar-tema .luna { display: block; }
.cambiar-tema .sol { display: none; }
[data-theme="dark"] .cambiar-tema .luna { display: none; }
[data-theme="dark"] .cambiar-tema .sol { display: block; }

/* ---------------------------------------------------------- enlaces y foco */

a { color: var(--acento); text-decoration-color: color-mix(in srgb, var(--acento) 40%, transparent); }
a:hover { color: var(--acento-fuerte); }

/* Mismo anillo de foco que el panel: dentro del borde, para que no lo recorte nada. */
a[href]:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: -2px;
  border-radius: 6px;
}

/* ---------------------------------------------------------- secciones */

section { margin-bottom: 42px; }

h2 { font-size: 22px; margin: 0 0 4px; }

h2 + .sub { margin: 0 0 18px; color: var(--texto-tenue); font-size: 15px; }

.rejilla {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.dato { font-size: 15px; margin: 0; }
.dato dt { font-weight: 600; color: var(--texto-fuerte); margin-bottom: 2px; }
.dato dd { margin: 0; color: var(--texto-suave); }

/* ---------------------------------------------------------- código */

pre, code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

pre {
  background: var(--codigo-fondo);
  color: #e2e8f0;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 10px;
  padding: 14px 16px;
  overflow-x: auto;
  font-size: 13.5px;
  line-height: 1.6;
  margin: 12px 0;
}

/* Dentro de un bloque, los saltos de línea son parte de la orden. */
pre code {
  background: none;
  padding: 0;
  color: inherit;
  font-size: inherit;
  white-space: pre;
}

code {
  background: var(--acento-suave);
  color: var(--acento-fuerte);
  padding: 1px 6px;
  border-radius: 6px;
  font-size: 0.88em;
  /* Una orden partida en dos líneas se lee como dos cosas distintas. */
  white-space: nowrap;
}

[data-theme="dark"] code { color: #93c5fd; }

/* ---------------------------------------------------------- avisos */

.aviso, .peligro {
  border-radius: 12px;
  padding: 13px 16px;
  margin: 16px 0;
  font-size: 15px;
  border: 1px solid;
}

.aviso {
  color: #b45309;
  background: rgba(217, 119, 6, 0.1);
  border-color: rgba(217, 119, 6, 0.28);
}

.peligro {
  color: #b91c1c;
  background: rgba(220, 38, 38, 0.09);
  border-color: rgba(220, 38, 38, 0.28);
}

[data-theme="dark"] .aviso {
  color: #fcd34d;
  background: rgba(245, 158, 11, 0.14);
  border-color: rgba(245, 158, 11, 0.3);
}

[data-theme="dark"] .peligro {
  color: #fecaca;
  background: rgba(248, 113, 113, 0.14);
  border-color: rgba(248, 113, 113, 0.32);
}

/* ---------------------------------------------------------- novedades */

.version { padding: 18px 22px; margin-bottom: 14px; }

.version h3 {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  font-size: 18px;
}

.version .fecha { font-size: 12px; font-weight: 400; color: var(--texto-tenue); }

.version h4 {
  margin: 18px 0 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--acento-fuerte);
}

[data-theme="dark"] .version h4 { color: #93c5fd; }

.version .entradilla-version { margin: 10px 0 4px; color: var(--texto-suave); font-size: 15px; }
.version ul { margin: 0; padding-left: 20px; }
.version li { margin-bottom: 8px; color: var(--texto-suave); }
.version li strong { color: var(--texto-fuerte); font-weight: 600; }

details.version summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0;
}
details.version summary::-webkit-details-marker { display: none; }
details.version summary::before {
  content: "▸";
  color: var(--texto-tenue);
  font-size: 12px;
  transition: transform 0.15s ease;
}
details.version[open] summary::before { content: "▾"; }
details.version summary:hover { color: var(--acento-fuerte); }

/* ---------------------------------------------------------- pasos */

ol.pasos { counter-reset: paso; list-style: none; padding: 0; margin: 0; }

ol.pasos > li {
  counter-increment: paso;
  position: relative;
  padding: 0 0 18px 40px;
  border-left: 2px solid var(--borde);
  margin-left: 13px;
}

ol.pasos > li:last-child { border-left-color: transparent; padding-bottom: 0; }

ol.pasos > li::before {
  content: counter(paso);
  position: absolute;
  left: -14px;
  top: -1px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: linear-gradient(160deg, #60a5fa, var(--acento));
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: grid;
  place-items: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), var(--sombra-corta);
}

ol.pasos h3 { margin: 0 0 4px; font-size: 16px; }
ol.pasos p { margin: 0 0 8px; color: var(--texto-suave); font-size: 15px; }

/* ---------------------------------------------------------- tabla */

.tabla-envuelta { overflow-x: auto; }

table { border-collapse: collapse; width: 100%; font-size: 15px; min-width: 460px; }

th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--borde); vertical-align: top; }
tr:last-child td { border-bottom: 0; }

th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--texto-tenue);
  font-weight: 600;
}

td { color: var(--texto-suave); }
td:first-child { font-weight: 600; color: var(--texto-fuerte); white-space: nowrap; }

/* ---------------------------------------------------------- pie */

footer.principal {
  border-top: 1px solid var(--borde);
  padding-top: 20px;
  color: var(--texto-tenue);
  font-size: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: center;
}

@media (max-width: 560px) {
  header.principal { padding-top: 32px; }
  .marca { font-size: 21px; }
  .entradilla { font-size: 16px; }
  .panel, .version { padding: 16px; }
  nav.principal .btn-primary, nav.principal .btn-secondary { flex: 1 1 auto; }
  /* Un `código` EN LÍNEA largo —una ruta como /etc/letsencrypt/live/micasa.duckdns.org/,
     una orden— lleva `white-space: nowrap`, y en una pantalla estrecha eso no es un detalle
     tipográfico: empuja la página entera y la saca de la pantalla. Aquí se parte antes que
     desbordar. Los bloques (`pre code`) se quedan como están: ahí los saltos de línea SÍ
     importan, y para eso el `pre` ya se desplaza por su cuenta. */
  code { white-space: normal; overflow-wrap: anywhere; }
  pre code { white-space: pre; overflow-wrap: normal; }
}

/* Quien no quiere animaciones, no las tiene. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ---------------------------------------------------------- capturas y rejillas */

.rejilla.dos { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.rejilla.tres { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.destacado h3 { margin: 0 0 6px; font-size: 16px; }
.destacado p { margin: 0; color: var(--texto-suave); font-size: 15px; }

.captura { margin: 0 0 16px; padding: 12px; }

.captura img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--borde);
}

/* Dos capturas por app, una por tema: se enseña la del tema puesto. Es la misma app; lo
   que cambia es lo que va a ver quien la instale. */
[data-theme="light"] .captura .oscuro,
[data-theme="light"] .captura-movil .oscuro,
[data-theme="dark"] .captura .claro,
[data-theme="dark"] .captura-movil .claro { display: none; }

.captura figcaption {
  margin-top: 12px;
  font-size: 14.5px;
  color: var(--texto-suave);
  line-height: 1.6;
}

.captura figcaption strong { color: var(--texto-fuerte); }

/* ---------------------------------------------------------- áreas (qué sabe hacer) */

.area { padding: 18px 22px; margin-bottom: 14px; }
.area h3 { margin: 0 0 10px; font-size: 17px; }
.area ul { margin: 0; padding-left: 20px; }
.area li { margin-bottom: 7px; color: var(--texto-suave); font-size: 15px; }
.area li strong { color: var(--texto-fuerte); }

/* ---------------------------------------------------------- menú de la cabecera */

nav.menu {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-bottom: 20px;
  padding: 3px;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.05);
  border: 1px solid var(--borde);
  width: fit-content;
}

[data-theme="dark"] nav.menu { background: rgba(15, 23, 42, 0.45); }

nav.menu a {
  padding: 5px 12px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 500;
  color: var(--texto-suave);
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

nav.menu a:hover { color: var(--texto-fuerte); }

nav.menu a.activa {
  background: #fff;
  color: var(--acento-fuerte);
  box-shadow: var(--sombra-corta);
}

[data-theme="dark"] nav.menu a.activa {
  background: rgba(59, 130, 246, 0.22);
  color: #dbeafe;
  box-shadow: none;
}

/* El botón que lleva al portal (comprar / entrar). Relleno del color de acción para que sea la
   acción que más destaca de la barra: es lo que convierte una visita en una venta. */
nav.menu a.portal-cta {
  background: var(--acento);
  color: #fff;
  font-weight: 600;
}
nav.menu a.portal-cta:hover { background: var(--acento-fuerte); color: #fff; }

/* ---------------------------------------------------------- documentación */

.con-lateral {
  display: grid;
  gap: 18px;
  grid-template-columns: 230px minmax(0, 1fr);
  align-items: start;
}

@media (max-width: 820px) {
  /* `minmax(0, 1fr)` y NO `1fr` a secas. Parece lo mismo y no lo es: `1fr` equivale a
     `minmax(auto, 1fr)`, y ese `auto` deja que el contenido imponga su ancho mínimo. Con una
     tabla dentro —y las guías están llenas— la columna se estiraba hasta los 881 px que
     medía la tabla, el índice lateral se estiraba con ella hasta 942, y la documentación se
     salía 587 px de la pantalla de un móvil. El envoltorio con desplazamiento
     (`.tabla-envuelta`) estaba puesto desde el principio y no servía de nada, porque nunca
     llegaba a tener un ancho que respetar. La regla de escritorio de arriba sí lo hacía
     bien; esta se quedó a medias. */
  .con-lateral { grid-template-columns: minmax(0, 1fr); }
}

.lateral { position: sticky; top: 18px; }
.lateral h4 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--texto-tenue); }
.lateral ul { margin: 0; padding: 0; list-style: none; }
.lateral li { margin-bottom: 2px; }
.lateral a {
  display: block;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 14px;
  text-decoration: none;
  color: var(--texto-suave);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.lateral a:hover { background: rgba(37, 99, 235, 0.1); color: var(--acento-fuerte); }
[data-theme="dark"] .lateral a:hover { background: rgba(59, 130, 246, 0.22); color: #dbeafe; }

/* La guía en sí: se lee como un documento, no como una interfaz. */
.documento { padding: 26px 30px; max-width: none; }
.documento h1 { font-size: 26px; margin: 0 0 14px; }
.documento h2 { font-size: 20px; margin: 30px 0 8px; padding-top: 14px; border-top: 1px solid var(--borde); }
.documento h3 { font-size: 16px; margin: 22px 0 6px; }
.documento h4 { font-size: 15px; margin: 18px 0 6px; color: var(--acento-fuerte); }
[data-theme="dark"] .documento h4 { color: #93c5fd; }
.documento p, .documento li { color: var(--texto-suave); }
.documento li { margin-bottom: 6px; }
.documento li strong, .documento p strong { color: var(--texto-fuerte); }
.documento ul, .documento ol { padding-left: 22px; }
.documento blockquote {
  margin: 14px 0;
  padding: 10px 16px;
  border-left: 3px solid var(--acento);
  background: var(--acento-suave);
  border-radius: 0 10px 10px 0;
  color: var(--texto-suave);
}
.documento hr { border: 0; border-top: 1px solid var(--borde); margin: 26px 0; }

/* Las guías de la portada de documentación. */
.guia { display: block; text-decoration: none; margin-bottom: 0; }
.guia h3 { margin: 0 0 4px; font-size: 16px; color: var(--texto-fuerte); }
.guia p { margin: 0; font-size: 14.5px; color: var(--texto-suave); }
.guia:hover h3 { color: var(--acento-fuerte); }

/* ---------------------------------------------------------- el móvil */

.moviles {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  justify-content: center;
}

.captura-movil { margin: 0; max-width: 240px; }

.captura-movil img {
  display: block;
  width: 100%;
  height: auto;
  /* Marco de teléfono: el radio y el borde bastan para que se lea como un móvil sin
     dibujar una carcasa que envejece mal. */
  border-radius: 26px;
  border: 1px solid var(--borde);
  box-shadow: var(--sombra-larga);
}

.captura-movil figcaption {
  margin-top: 10px;
  text-align: center;
  font-size: 13.5px;
  color: var(--texto-tenue);
}

.pie-movil {
  margin: 20px 0 0;
  font-size: 14.5px;
  color: var(--texto-suave);
}

/* ---------------------------------------------------------- la marca */

/* El icono ya trae su propio fondo y su luz: aquí solo se le da tamaño y la sombra que
   lo despega del cristal, como en el escritorio del panel. */
.marca-icono {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  box-shadow: var(--sombra-media);
}

/* El nombre va como UNA pieza: dentro de un contenedor flex, «LGM» y «-OS» eran dos
   elementos y el hueco del flex los separaba. */
.marca-nombre { display: inline; }
.marca-os { color: var(--acento); }