/* ============================================================
   GEOcensO · Manual Operativo por Roles — Estilos compartidos
   ============================================================ */
:root{
  --azul:#4F46E5; --azul-osc:#4338ca; --ambar:#f59e0b; --verde:#0d9488; --violeta:#8b5cf6;
  --rojo:#e11d48; --verde-claro:#10b981; --tinta:#1e293b; --gris:#64748b; --borde:#e2e8f0; --fondo:#f8fafc;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  color:var(--tinta); background:var(--fondo); line-height:1.65;
}
/* ---------- Layout ---------- */
.layout{ display:flex; min-height:100vh; }
.sidebar{
  width:290px; flex:0 0 290px; position:sticky; top:0; height:100vh; overflow-y:auto;
  background:#0f172a; color:#e2e8f0; padding:20px 16px;
}
.sidebar h2{ font-size:15px; margin:18px 0 8px; color:#94a3b8; text-transform:uppercase; letter-spacing:.5px; }
.sidebar a.n1{ display:block; color:#e2e8f0; text-decoration:none; padding:6px 10px; border-radius:8px; font-size:13px; }
.sidebar a.n1:hover{ background:rgba(255,255,255,.08); color:#fff; }
.sidebar a.n2{ display:block; color:#94a3b8; text-decoration:none; padding:4px 10px 4px 22px; border-radius:8px; font-size:12px; }
.sidebar a.n2:hover{ color:#fff; }
.sidebar a.home{ margin-top:14px; display:block; color:#c7d2fe; font-size:12px; }
.sidebar .brand{ display:flex; align-items:center; gap:10px; padding-bottom:14px; border-bottom:1px solid rgba(255,255,255,.1); margin-bottom:8px; }
.sidebar .brand img{ width:40px; height:40px; }
.sidebar .brand b{ font-size:16px; color:#fff; }
.sidebar .brand small{ display:block; color:#94a3b8; font-size:11px; font-weight:400; }
main{ flex:1; padding:30px 46px 90px; max-width:1180px; margin:0 auto; min-width:0; }
@media (max-width:900px){
  .layout{flex-direction:column;} .sidebar{position:static;width:100%;height:auto;flex:auto;max-height:none;}
  main{padding:18px;}
}
/* ---------- Tipografía ---------- */
h1{ font-size:31px; margin:0 0 6px; color:var(--azul-osc); }
h2{ font-size:23px; margin:46px 0 12px; padding-bottom:8px; border-bottom:3px solid var(--azul); color:var(--azul-osc); }
h3.category{ font-size:20px; margin:40px 0 10px; color:var(--tinta); }
h4{ font-size:15px; margin:20px 0 6px; color:var(--violeta); }
p, li{ font-size:14.5px; }
.lead{ font-size:16px; color:var(--gris); }
code{ background:#eef2ff; color:var(--azul-osc); padding:2px 6px; border-radius:6px; font-size:13px; }
strong{ color:#0f172a; }
/* ---------- Tablas ---------- */
table{ width:100%; border-collapse:collapse; margin:14px 0; background:#fff; border-radius:10px; overflow:hidden; font-size:13.5px; }
th,td{ border:1px solid var(--borde); padding:9px 11px; text-align:left; vertical-align:top; }
th{ background:#334155; color:#fff; font-weight:600; }
th.t-azul{ background:var(--azul); }
tr:nth-child(even) td{ background:#f8fafc; }
table.matriz th, table.matriz td{ text-align:center; font-size:12.5px; }
table.matriz td:first-child, table.matriz th:first-child{ text-align:left; }
/* ---------- Tarjetas y avisos ---------- */
.card{ background:#fff; border:1px solid var(--borde); border-radius:12px; padding:16px 18px; margin:14px 0; }
.callout{ border-left:4px solid var(--ambar); background:#fffbeb; padding:12px 16px; border-radius:8px; margin:16px 0; font-size:13.5px; }
.callout.info{ border-left-color:var(--azul); background:#eef2ff; }
.callout.ok{ border-left-color:var(--verde); background:#f0fdfa; }
.callout.v{ border-left-color:var(--violeta); background:#f5f3ff; }
.callout.warn{ border-left-color:var(--rojo); background:#fff1f2; }
ol.steps{ padding-left:22px; }
ol.steps > li{ margin:7px 0; }
ul.tight li{ margin:4px 0; }
/* ---------- Chips ---------- */
.pill{ display:inline-block; background:var(--azul); color:#fff; font-size:11px; font-weight:700; padding:3px 10px; border-radius:999px; }
.pill.m{ background:var(--verde); }
.pill.d{ background:#e11d48; }
.pill.sup{ background:var(--ambar); }
.pill.trade{ background:var(--violeta); }
.tag{ display:inline-block; font-size:11px; font-weight:700; padding:2px 8px; border-radius:6px; margin-right:4px; }
.tag.on{ background:#dcfce7; color:#15803d; }
.tag.off{ background:#fee2e2; color:#b91c1c; }
.tag.gray{ background:#e2e8f0; color:#475569; }
/* ---------- HERO ---------- */
.hero{ background:linear-gradient(135deg,#4338ca 0%,#4F46E5 50%,#a855f7 100%); color:#fff; border-radius:16px; padding:36px; margin-bottom:28px; }
.hero h1{ color:#fff; font-size:33px; margin:10px 0 6px; }
.hero p{ color:#e0e7ff; font-size:15px; }
.hero .logo{ width:84px; height:84px; border-radius:16px; background:#fff; padding:8px; }
/* ---------- ÍNDICE ---------- */
.toc{ background:#fff; border:1px solid var(--borde); border-radius:12px; padding:20px 24px; }
.toc a{ color:var(--azul-osc); text-decoration:none; font-weight:600; }
.toc a:hover{ text-decoration:underline; }
.toc ul{ margin:4px 0; }
.toc ul ul{ margin-left:16px; }
.toc li{ font-size:14px; }
/* ---------- PLANTILLA DIDÁCTICA ---------- */
.func{ background:#fff; border:1px solid var(--borde); border-radius:14px; padding:22px 24px; margin:22px 0; box-shadow:0 4px 14px rgba(0,0,0,.04); }
.func > h3{ margin-top:0; font-size:20px; display:flex; align-items:center; gap:8px; }
.func .objetivo{ display:flex; gap:10px; background:#f5f7ff; border:1px solid #e0e7ff; border-radius:10px; padding:12px 14px; margin:12px 0 16px; }
.func .objetivo b{ color:var(--azul-osc); white-space:nowrap; }
.func .objetivo i{ font-style:normal; color:var(--tinta); }
.perm-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:14px 0; }
@media (max-width:760px){ .perm-grid{ grid-template-columns:1fr; } }
.perm{ border-radius:10px; padding:12px 14px; font-size:13px; border:1px solid var(--borde); }
.perm.g{ background:#f0fdf4; border-color:#bbf7d0; }
.perm.b{ background:#eff6ff; border-color:#bfdbfe; }
.perm.p{ background:#f5f3ff; border-color:#ddd6fe; }
.perm h5{ margin:0 0 6px; font-size:13px; }
.perm.g h5{ color:#15803d; } .perm.b h5{ color:#1d4ed8; } .perm.p h5{ color:#7c3aed; }
.perm ul{ margin:0; padding-left:16px; }
.perm li{ margin:3px 0; }
.ref-visual{ border:1px dashed var(--azul); border-radius:12px; padding:14px; margin:14px 0; background:#f8fafc; }
.ref-visual > b{ display:block; margin-bottom:10px; color:var(--azul-osc); }
.metrics{ background:#fdf4ff; border:1px solid #e9d5ff; border-radius:10px; padding:12px 14px; margin:14px 0; font-size:13.5px; }
.metrics b{ color:#a21caf; }
.approve{ background:#f0fdfa; border:1px solid #99f6e4; border-radius:10px; padding:12px 14px; margin:14px 0; font-size:13.5px; }
.approve b{ color:#0f766e; }
.estado{ display:inline-block; font-size:11px; font-weight:800; padding:2px 9px; border-radius:999px; text-transform:uppercase; letter-spacing:.4px; }
.estado.auto{ background:#dcfce7; color:#15803d; }
.estado.sup{ background:#fef3c7; color:#b45309; }
.estado.bloq{ background:#fee2e2; color:#b91c1c; }
/* ---------- Capturas / placeholders ---------- */
.captura{ margin:16px 0 20px; }
.captura img{
  display:block; max-width:100%; max-height:760px; height:auto; width:auto; margin:0 auto; padding:8px;
  background:#fff; border:1px solid var(--borde); border-radius:10px;
  box-shadow:0 6px 18px rgba(0,0,0,.07);
}
.captura figcaption{ font-size:12.5px; color:var(--gris); margin-top:8px; text-align:center; }
.captura.sin-imagen{ border:2px dashed var(--azul); border-radius:12px; padding:22px 18px; text-align:center; background:#f5f7ff; }
.captura.sin-imagen img{ display:none; }
.captura.sin-imagen::after{
  content:"🖼️ COLOCA AQUÍ TU CAPTURA — archivo: " attr(data-archivo);
  font-size:13px; font-weight:600; color:var(--azul-osc);
}
/* Cuando el JS inyecta el mensaje copiable, oculta el pseudo-elemento */
.captura.sin-imagen.copy-ok::after{ content:none; }
.captura .ph-msg{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:center; gap:6px; }
.captura .ph-pre{ font-size:13px; font-weight:600; color:var(--azul-osc); }
.captura .ph-name{
  background:#eef2ff; color:var(--azul-osc); padding:3px 8px; border-radius:6px;
  font-size:13px; cursor:pointer; user-select:all; border:1px dashed var(--azul);
}
.captura .ph-name:hover{ background:var(--azul); color:#fff; }
.captura .ph-name.copied{ background:#dcfce7; color:#15803d; border-color:#86efac; }
.orient{ display:inline-block; font-size:11px; font-weight:700; padding:2px 8px; border-radius:6px; background:#1e293b; color:#fff; margin-left:6px; }
footer{ margin-top:56px; padding-top:18px; border-top:1px solid var(--borde); color:var(--gris); font-size:12.5px; text-align:center; }
@media print{
  .sidebar{ display:none; }
  main{ max-width:100%; padding:0; }
  .func, .captura{ page-break-inside:avoid; }
}