/* Report Manager - hoja de estilo del sitio publico.
   Diseno sobrio y profesional, sin frameworks ni JavaScript.
   Una sola hoja compartida por todas las paginas. */

/* ---- Tokens ---- */
:root {
  --ink:#1f2328;
  --muted:#57606a;
  --border:#d0d7de;
  --surface:#f6f8fa;
  --bg:#ffffff;
  --accent:#0969da;
  --accent-hover:#0550ae;
  --accent-soft:#ddeaff;
  --radius:6px;
  --maxw:1100px;
  --shadow:0 1px 2px rgba(31,35,40,.08);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
}

/* ---- Base ---- */
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0;
  font-family:var(--font);
  font-size:16px;
  line-height:1.6;
  color:var(--ink);
  background:var(--bg);
}
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
img { max-width:100%; height:auto; }
h1,h2,h3 { line-height:1.25; color:var(--ink); }
h2 { font-size:1.5rem; margin:2rem 0 .75rem; padding-bottom:.3rem; border-bottom:1px solid var(--border); }
h3 { font-size:1.15rem; margin:1.5rem 0 .5rem; }
p { margin:.75rem 0; }
ul { margin:.75rem 0; padding-left:1.4rem; }
li { margin:.25rem 0; }
code { font-family:var(--mono); font-size:.9em; background:var(--surface); padding:.15em .4em; border-radius:4px; }
pre { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:14px 16px; overflow:auto; margin:1rem 0; }
pre code { background:none; padding:0; font-size:.875rem; line-height:1.55; color:var(--ink); }

/* Ancho comun de los contenedores internos */
.topbar-inner,.hero-inner,.features-inner,.footer-inner,.page {
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:20px;
}

/* ---- Barra de navegacion superior ---- */
.topbar {
  position:sticky; top:0; z-index:50;
  background:var(--bg);
  border-bottom:1px solid var(--border);
}
.topbar-inner { display:flex; align-items:center; gap:24px; min-height:62px; }
.brand { font-weight:700; font-size:1.15rem; color:var(--ink); white-space:nowrap; }
.brand:hover { text-decoration:none; }
.nav-links { display:flex; align-items:center; gap:4px; flex:1; justify-content:center; flex-wrap:wrap; }
.nav-links a {
  color:var(--muted); font-size:.95rem; font-weight:500;
  padding:.4rem .85rem; border-radius:var(--radius); white-space:nowrap;
}
.nav-links a:hover { color:var(--ink); background:var(--surface); text-decoration:none; }
.nav-links a.active { color:var(--accent); background:var(--accent-soft); font-weight:600; }
.topbar-right { display:flex; align-items:center; white-space:nowrap; }
.lang-switch { display:inline-flex; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; font-size:.85rem; }
.lang-switch > * { padding:.35rem .7rem; color:var(--muted); }
.lang-switch > * + * { border-left:1px solid var(--border); }
.lang-switch .current { background:var(--surface); color:var(--ink); font-weight:600; }
.lang-switch a:hover { background:var(--surface); color:var(--ink); text-decoration:none; }

/* ---- Botones ---- */
.btn {
  display:inline-block;
  padding:.6rem 1.3rem;
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:var(--bg);
  color:var(--ink);
  font-weight:600; font-size:1rem;
  cursor:pointer;
  transition:background .15s,border-color .15s,color .15s;
}
.btn:hover { text-decoration:none; border-color:var(--accent); color:var(--accent); }
.btn-primary { background:var(--accent); border-color:var(--accent); color:#fff; }
.btn-primary:hover { background:var(--accent-hover); border-color:var(--accent-hover); color:#fff; }

/* ---- Hero (cabecera de cada pagina) ---- */
.hero { background:var(--surface); border-bottom:1px solid var(--border); }
.hero-inner { padding-block:48px; text-align:center; }
.hero h1 { font-size:2.25rem; font-weight:800; letter-spacing:-.01em; margin:0 0 .5rem; }
.hero .tagline { font-size:1.1rem; color:var(--muted); margin:0 auto; max-width:70ch; }
.hero .cta { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:1.75rem; }
/* Variante ampliada para la pagina principal */
.hero.home .hero-inner { padding-block:80px; }
.hero.home h1 { font-size:clamp(2.6rem,6vw,4.25rem); margin-bottom:1rem; }
.hero.home .tagline { font-size:1.25rem; }

/* ---- Rejilla de caracteristicas ---- */
.features-inner { padding-block:36px; }
.features-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; }
.card {
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px 20px;
  background:var(--bg);
  transition:border-color .15s,box-shadow .15s;
}
.card:hover { border-color:var(--accent); box-shadow:var(--shadow); }
.card h3 { margin:.2rem 0 .4rem; font-size:1.05rem; }
.card p { margin:0; color:var(--muted); font-size:.95rem; }
.card .new {
  display:inline-block; font-size:.65rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.04em;
  color:var(--accent); border:1px solid var(--accent); border-radius:4px;
  padding:0 .4em; margin-left:.4em; vertical-align:middle;
}

/* ---- Contenido de pagina ---- */
.page { padding-block:24px 48px; }
.page p,.page ul { max-width:74ch; }
.page > img { display:block; margin:1.25rem 0; border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); }

/* ---- Capturas (pagina principal): el designer conserva su tamano nativo
   (400x300) y el preview se ajusta a la MISMA altura con ancho automatico
   (queda 300x489). Lado a lado en pantalla ancha; apilados (designer arriba,
   preview abajo) en pantalla estrecha. ---- */
figure.shots { margin:1.5rem auto; display:flex; gap:16px; flex-wrap:wrap; align-items:flex-start; justify-content:center; }
figure.shots img { flex:0 0 auto; height:300px; width:auto; max-width:none; border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); }
figure.shots figcaption { flex-basis:100%; text-align:center; color:var(--muted); font-size:.85rem; margin-top:.5rem; }
@media screen and (max-width:560px) {
  figure.shots img { height:auto; width:100%; }
}

/* ---- Pie de pagina ---- */
.site-footer { border-top:1px solid var(--border); background:var(--surface); margin-top:48px; }
.footer-inner { padding-block:24px; color:var(--muted); font-size:.9rem; display:flex; gap:8px 16px; flex-wrap:wrap; align-items:center; justify-content:center; text-align:center; }
.footer-inner a { color:var(--muted); }
.footer-inner a:hover { color:var(--accent); }
.footer-inner .sep { color:var(--border); }

/* ---- Tablas ---- */
table { border-collapse:collapse; margin:1rem 0; width:auto; max-width:100%; }
th,td { border:1px solid var(--border); padding:.5rem .7rem; text-align:left; vertical-align:top; }
th { background:var(--surface); }

/* ---- Responsive ---- */
@media screen and (max-width:820px) {
  .topbar { position:static; }
  .topbar-inner { flex-direction:column; gap:12px; padding-block:12px; min-height:0; }
  .nav-links { gap:4px 6px; }
  .hero.home h1 { font-size:2.1rem; }
  .hero-inner { padding-block:36px; }
  .hero.home .hero-inner { padding-block:48px; }
}