/* =========================================================================
   sistema.css — estilos de las páginas por sistema (POS, Taller, Consulta).
   Se apoya en los tokens y componentes de styles.css (--grad, .btn, .section…).
   ========================================================================= */

/* Cada sistema pinta su propio acento sobre el mismo layout. */
.syspage { --accent: var(--cyan); --accent2: var(--violet); }
.syspage[data-sys="pos"]      { --accent:#00c2a8; --accent2:#0091b3; }
.syspage[data-sys="taller"]   { --accent:#6d3bff; --accent2:#d61bb0; }
.syspage[data-sys="consulta"] { --accent:#0091b3; --accent2:#2bb3d6; }

/* ---- Hero del sistema ---- */
.sys-hero { max-width: var(--maxw); margin: 0 auto; padding: 120px 24px 30px; }
.sys-back { display:inline-flex; align-items:center; gap:8px; color:var(--muted);
  text-decoration:none; font-weight:500; font-size:.92rem; margin-bottom:22px; transition:color .2s; }
.sys-back:hover { color:var(--text); }
.sys-hero-grid { display:grid; grid-template-columns: 1.05fr .95fr; gap:48px; align-items:center; }
.sys-badge { display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:999px;
  background:linear-gradient(120deg, color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--accent2) 22%, transparent));
  border:1px solid var(--border); font-size:.82rem; font-weight:600; letter-spacing:.02em; }
.sys-hero h1 { font-family:"Space Grotesk",sans-serif; font-size:clamp(2.1rem,5vw,3.3rem);
  line-height:1.05; margin:18px 0 14px; letter-spacing:-.02em; }
.sys-hero h1 .grad { background:linear-gradient(120deg,var(--accent),var(--accent2));
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.sys-hero p.lead { color:var(--muted); font-size:1.08rem; line-height:1.65; max-width:38ch; }
.sys-hero .hero-cta { margin-top:26px; }

/* ---- "Captura de pantalla" (mockup) ---- */
.shot { position:relative; border-radius:16px; overflow:hidden; background:#0c1024;
  border:1px solid var(--border); box-shadow:var(--shadow); }
html[data-theme="light"] .shot { background:#fbfdff; }
.shot-bar { display:flex; align-items:center; gap:7px; padding:10px 14px;
  background:rgba(255,255,255,.04); border-bottom:1px solid var(--border); }
html[data-theme="light"] .shot-bar { background:#eef2f8; }
.shot-dot { width:11px; height:11px; border-radius:50%; }
.shot-dot.r{background:#ff5f57}.shot-dot.y{background:#febc2e}.shot-dot.g{background:#28c840}
.shot-url { margin-left:10px; font-size:.72rem; color:var(--muted); }
.shot-body { padding:16px; }

/* Piezas de interfaz simuladas dentro de una captura */
.mk { display:flex; gap:12px; font-size:.72rem; color:var(--text); }
.mk-side { width:110px; flex:0 0 auto; background:linear-gradient(160deg,var(--accent),var(--accent2));
  border-radius:10px; padding:12px 10px; color:#fff; display:flex; flex-direction:column; gap:9px; }
.mk-side b { font-size:.7rem; letter-spacing:.08em; opacity:.85; }
.mk-side i { font-style:normal; opacity:.9; padding:5px 7px; border-radius:6px; }
.mk-side i.on { background:rgba(255,255,255,.22); font-weight:600; }
.mk-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:10px; }
.mk-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.mk-card { background:var(--surface); border:1px solid var(--border); border-radius:9px; padding:9px; }
.mk-card b { display:block; font-size:1rem; color:var(--accent); }
.mk-card span { font-size:.62rem; color:var(--muted); }
.mk-tbl { background:var(--surface); border:1px solid var(--border); border-radius:9px; overflow:hidden; }
.mk-tr { display:flex; justify-content:space-between; padding:8px 10px; border-bottom:1px solid var(--border); }
.mk-tr:last-child{border-bottom:none}
.mk-tr .l{color:var(--muted)} .mk-tr .v{font-weight:600}
.mk-pill{display:inline-block;padding:2px 8px;border-radius:999px;font-size:.6rem;font-weight:700}
.mk-pill.ok{background:rgba(40,200,100,.16);color:#28c840}
.mk-pill.warn{background:rgba(254,188,46,.16);color:#e0a23f}
.mk-btn{background:linear-gradient(120deg,var(--accent),var(--accent2));color:#fff;
  border-radius:8px;padding:8px;text-align:center;font-weight:700;font-size:.72rem}
.mk-total{display:flex;justify-content:space-between;align-items:center;
  background:linear-gradient(120deg,color-mix(in srgb,var(--accent) 16%,transparent),color-mix(in srgb,var(--accent2) 16%,transparent));
  border:1px solid var(--border);border-radius:9px;padding:10px 12px}
.mk-total b{font-size:1.05rem}

/* Galería de capturas */
.shots-3 { display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.shots-3 .shot.wide { grid-column:1 / -1; }
.shot-caption { text-align:center; color:var(--muted); font-size:.85rem; margin-top:10px; }

/* ---- Funciones (grid de tarjetas) ---- */
.feat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.feat { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:22px; }
.feat .ic { width:42px; height:42px; border-radius:11px; display:grid; place-items:center; font-size:1.25rem;
  background:linear-gradient(120deg,color-mix(in srgb,var(--accent) 24%,transparent),color-mix(in srgb,var(--accent2) 24%,transparent));
  border:1px solid var(--border); margin-bottom:12px; }
.feat h3 { font-family:"Space Grotesk",sans-serif; font-size:1.05rem; margin:0 0 6px; }
.feat p { color:var(--muted); font-size:.92rem; line-height:1.55; margin:0; }

/* ---- Planes / precios ---- */
.plan-toggle { display:inline-flex; align-items:center; gap:6px; background:var(--surface);
  border:1px solid var(--border); border-radius:999px; padding:5px; margin:0 auto 8px; }
.plan-toggle button { border:none; background:transparent; color:var(--muted); cursor:pointer;
  font:inherit; font-weight:600; font-size:.9rem; padding:8px 18px; border-radius:999px; transition:.2s; }
.plan-toggle button.active { background:linear-gradient(120deg,var(--accent),var(--accent2)); color:#fff; }
.toggle-hint { text-align:center; color:var(--accent); font-weight:600; font-size:.85rem; margin-bottom:24px; }

.plans { display:grid; gap:22px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  max-width:860px; margin:0 auto; align-items:stretch; }
.plan { position:relative; background:var(--surface); border:1px solid var(--border);
  border-radius:20px; padding:30px 26px; display:flex; flex-direction:column; }
.plan.featured { border-color:color-mix(in srgb,var(--accent) 55%,var(--border));
  box-shadow:0 30px 70px -34px color-mix(in srgb,var(--accent) 55%,transparent); }
.plan-best { position:absolute; top:-11px; left:50%; transform:translateX(-50%);
  background:linear-gradient(120deg,var(--accent),var(--accent2)); color:#fff; font-size:.72rem;
  font-weight:700; padding:5px 14px; border-radius:999px; letter-spacing:.03em; }
.plan h3 { font-family:"Space Grotesk",sans-serif; font-size:1.3rem; margin:0 0 4px; }
.plan .plan-desc { color:var(--muted); font-size:.9rem; margin:0 0 18px; min-height:2.6em; }
.plan .amount { font-family:"Space Grotesk",sans-serif; font-size:2.5rem; font-weight:700; line-height:1; letter-spacing:-.02em; }
.plan .amount .curr { font-size:1.2rem; vertical-align:top; margin-right:2px; color:var(--muted); }
.plan .amount .per { font-size:.95rem; font-weight:500; color:var(--muted); }
.plan .amount.quote { font-size:1.9rem; background:linear-gradient(120deg,var(--accent),var(--accent2));
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.plan .amount-sub { color:var(--muted); font-size:.82rem; margin:8px 0 0; min-height:1.2em; }
.plan ul { list-style:none; padding:0; margin:20px 0 24px; display:flex; flex-direction:column; gap:11px; }
.plan ul li { position:relative; padding-left:26px; color:var(--text); font-size:.92rem; line-height:1.45; }
.plan ul li::before { content:"✓"; position:absolute; left:0; top:0; width:18px; height:18px;
  border-radius:50%; display:grid; place-items:center; font-size:.7rem; font-weight:700; color:#fff;
  background:linear-gradient(120deg,var(--accent),var(--accent2)); }
.plan .btn { margin-top:auto; }

/* ---- FAQ ---- */
.faq { max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.faq details { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:4px 20px; }
.faq summary { cursor:pointer; font-weight:600; padding:16px 0; list-style:none; display:flex; justify-content:space-between; align-items:center; }
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--accent);font-size:1.3rem;font-weight:400}
.faq details[open] summary::after{content:"–"}
.faq p { color:var(--muted); line-height:1.6; margin:0 0 16px; font-size:.94rem; }

@media (max-width:820px){
  .sys-hero-grid{grid-template-columns:1fr; gap:30px}
  .sys-hero{padding-top:100px}
  .shots-3{grid-template-columns:1fr}
  .shots-3 .shot.wide{grid-column:auto}
  .feat-grid{grid-template-columns:1fr}
  .mk-side{width:92px}
}