/* =========================================================
   Estilos compartidos para los Manuales de Usuario
   Referenciado desde wwwroot/index.html
   ========================================================= */

.man-wrap { font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; font-size: 14px; line-height: 1.6; color: #2d3748; }

/* Cover */
.man-cover { background: linear-gradient(135deg,#1a365d 0%,#2b6cb0 60%,#3182ce 100%); color:#fff; padding:56px 48px; border-radius:10px; margin-bottom:32px; }
.man-cover .badge-system { display:inline-block; background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.3); border-radius:20px; padding:4px 14px; font-size:11px; letter-spacing:.8px; text-transform:uppercase; margin-bottom:16px; }
.man-cover h1 { font-size:30px; font-weight:700; line-height:1.2; margin-bottom:10px; }
.man-cover p  { font-size:15px; color:rgba(255,255,255,.8); max-width:540px; margin-bottom:24px; }
.man-cover .meta-grid { display:flex; gap:32px; flex-wrap:wrap; }
.man-cover .meta-item label { font-size:10px; text-transform:uppercase; letter-spacing:.8px; opacity:.6; display:block; margin-bottom:4px; }
.man-cover .meta-item span  { font-size:14px; font-weight:600; }

/* TOC */
.man-toc { margin-bottom:0; }
.man-toc h3 { font-size:14px; font-weight:700; color:#2b6cb0; margin-bottom:12px; }
.man-toc ol { padding-left:20px; margin:0; }
.man-toc li { margin-bottom:5px; }
.man-toc a  { color:#2b6cb0; text-decoration:none; font-size:13px; }
.man-toc a:hover { text-decoration:underline; }
.man-toc ol ol { padding-left:16px; margin-top:3px; }
.man-toc ol ol li { margin-bottom:2px; }

/* Section */
.man-section { margin-bottom:0; }
.num { background:#2b6cb0; color:#fff; border-radius:6px; font-size:11px; font-weight:700; padding:2px 8px; }
h2.man-title { font-size:20px; font-weight:700; color:#1a365d; margin-bottom:6px; display:flex; align-items:center; gap:10px; }
h2.man-title .num { background:#2b6cb0; color:#fff; border-radius:6px; font-size:12px; font-weight:700; padding:2px 9px; }
h3.man-sub { font-size:15px; font-weight:600; color:#2c5282; margin:22px 0 8px; padding-bottom:5px; border-bottom:2px solid #bee3f8; }
h4.man-minor { font-size:13px; font-weight:600; color:#2d3748; margin:14px 0 6px; }

/* Callouts */
.man-callout { border-radius:8px; padding:12px 16px; margin:14px 0; display:flex; gap:10px; align-items:flex-start; }
.man-callout-icon { font-size:17px; flex-shrink:0; margin-top:1px; }
.man-callout.info    { background:#ebf8ff; border-left:4px solid #3182ce; }
.man-callout.warning { background:#fffbeb; border-left:4px solid #d69e2e; }
.man-callout.success { background:#f0fff4; border-left:4px solid #38a169; }
.man-callout.danger  { background:#fff5f5; border-left:4px solid #e53e3e; }

/* Tables */
.man-table { width:100%; border-collapse:collapse; margin:10px 0 18px; font-size:13px; }
.man-table thead th { background:#2b6cb0; color:#fff; padding:9px 13px; text-align:left; font-weight:600; font-size:12px; }
.man-table tbody tr:nth-child(odd)  { background:#f7fafc; }
.man-table tbody tr:nth-child(even) { background:#fff; }
.man-table tbody td { padding:8px 13px; border-bottom:1px solid #e2e8f0; vertical-align:top; }
.man-table tbody tr:hover { background:#ebf8ff; }

/* Steps */
.man-steps { list-style:none; margin:10px 0; padding:0; }
.man-steps li { display:flex; gap:12px; margin-bottom:12px; align-items:flex-start; }
.man-step-num { background:#2b6cb0; color:#fff; border-radius:50%; width:24px; height:24px; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; flex-shrink:0; margin-top:2px; }
.man-step-body strong { display:block; margin-bottom:2px; }

/* KPI grid */
.man-kpi-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px; margin:14px 0; }
.man-kpi-card { border-radius:10px; padding:14px 16px; border:1px solid transparent; }
.man-kpi-card.green  { background:#f0fff4; border-color:#c6f6d5; }
.man-kpi-card.blue   { background:#ebf8ff; border-color:#bee3f8; }
.man-kpi-card.purple { background:#faf5ff; border-color:#e9d8fd; }
.man-kpi-card.yellow { background:#fffff0; border-color:#fefcbf; }
.man-kpi-card label  { font-size:11px; text-transform:uppercase; letter-spacing:.6px; color:#718096; display:block; margin-bottom:4px; }
.man-kpi-card .val   { font-size:20px; font-weight:700; }
.man-kpi-card.green  .val { color:#276749; }
.man-kpi-card.blue   .val { color:#2c5282; }
.man-kpi-card.purple .val { color:#553c9a; }
.man-kpi-card.yellow .val { color:#744210; }
.man-kpi-card p      { font-size:12px; color:#718096; margin-top:4px; margin-bottom:0; }

/* Badges */
.man-badge { display:inline-block; border-radius:20px; padding:2px 9px; font-size:11px; font-weight:600; margin:1px; }
.man-badge-success { background:#c6f6d5; color:#276749; }
.man-badge-warning { background:#fefcbf; color:#744210; }
.man-badge-info    { background:#bee3f8; color:#2c5282; }
.man-badge-danger  { background:#fed7d7; color:#9b2c2c; }
.man-badge-gray    { background:#e2e8f0; color:#4a5568; }

/* Flow banner */
.man-flow { background:#edf2f7; border-radius:10px; padding:14px 18px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:14px 0; font-size:13px; }
.man-flow .step-badge { background:#2b6cb0; color:#fff; border-radius:20px; padding:2px 10px; font-size:12px; font-weight:700; margin-right:4px; }
.man-flow .arrow { color:#a0aec0; font-size:16px; }

/* Screenshot */
.man-screenshot { background:repeating-linear-gradient(45deg,#edf2f7,#edf2f7 10px,#e2e8f0 10px,#e2e8f0 20px); border:2px dashed #a0aec0; border-radius:10px; padding:36px 20px; text-align:center; color:#718096; font-size:13px; margin:14px 0; }
.man-screenshot strong { display:block; font-size:13px; color:#4a5568; margin-bottom:4px; }

hr.man-hr { border:none; border-top:1px solid #e2e8f0; margin:20px 0; }

ul.man-ul { margin-left:20px; margin-bottom:12px; }
ol.man-ol { margin-left:20px; margin-bottom:12px; }
ol.man-ol li, ul.man-ul li { margin-bottom:4px; }