/* public/css/manual.css - Manual de usuario */

html { scroll-behavior: smooth; }

body.mn-body {
    margin: 0;
    padding-top: 56px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: #f5f6fa;
    background-image:
        radial-gradient(circle at 1px 1px, rgba(90, 100, 150, 0.17) 1px, transparent 1.4px),
        radial-gradient(560px 440px at 6% 4%, rgba(255, 212, 168, 0.45), transparent 70%),
        radial-gradient(820px 600px at 46% 108%, rgba(118, 130, 255, 0.32), transparent 70%);
    background-size: 22px 22px, auto, auto;
    background-attachment: fixed;
}

.mn, .mn * { box-sizing: border-box; font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; }

.mn {
    --ink: #171717; --text: #404040; --muted: #737373; --line: #ececec;
    --accent: #0a6fd6; --accent-bg: #eaf3fd; --ok: #15803d; --ok-bg: #ecfdf3;
    --warn: #b45309; --warn-bg: #fff7e6; --bad: #b91c1c; --bad-bg: #fef2f2;
    flex: 1; width: 100%; max-width: 1240px; margin: 0 auto;
    padding: 1.25rem 1rem 3rem; font-size: 13px; line-height: 1.7; color: var(--text);
}

.mn svg.i { width: 1em; height: 1em; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ===== Portada ===== */
.mn-hero {
    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
    padding: 1.1rem 1.4rem; margin-bottom: .9rem;
    background: rgba(255,255,255,.93); border: 1px solid var(--line); border-radius: 16px;
    box-shadow: 0 6px 22px -14px rgba(15,23,42,.25);
}
.mn-hero img { width: 46px; height: 46px; object-fit: contain; }
.mn-hero-txt { flex: 1 1 260px; min-width: 0; }
.mn-hero h1 { margin: 0; font-family: 'Oswald', 'Inter', sans-serif; font-weight: 600; font-size: 1.45rem; line-height: 1.2; color: var(--ink); letter-spacing: .01em; }
.mn-hero p { margin: .2rem 0 0; color: var(--muted); font-size: 12.5px; }
.mn-meta { display: flex; gap: .4rem; flex-wrap: wrap; }
.mn-chip { font-size: 11px; padding: .18rem .6rem; border-radius: 999px; background: #f4f4f5; border: 1px solid var(--line); color: #52525b; white-space: nowrap; }

/* ===== Barra de herramientas ===== */
.mn-tools {
    position: sticky; top: 56px; z-index: 30; display: flex; gap: .6rem; flex-wrap: wrap; align-items: center;
    padding: .55rem .7rem; margin-bottom: .9rem; background: rgba(255,255,255,.96);
    border: 1px solid var(--line); border-radius: 14px; backdrop-filter: blur(6px);
}
.mn-search { position: relative; flex: 1 1 220px; min-width: 0; }
.mn-search svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: #a1a1aa; }
.mn-search input {
    width: 100%; height: 34px; padding: 0 .7rem 0 32px; font-size: 12.5px; color: var(--ink);
    border: 1px solid #e4e4e7; border-radius: 9px; background: #fafafa; outline: none;
}
.mn-search input:focus { border-color: var(--accent); background: #fff; box-shadow: 0 0 0 3px rgba(10,111,214,.12); }
.mn-tabs { display: flex; gap: .25rem; background: #f4f4f5; padding: 3px; border-radius: 10px; }
.mn-tab { border: 0; background: transparent; padding: .32rem .8rem; font-size: 12px; font-weight: 500; color: #52525b; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; gap: .35rem; }
.mn-tab:hover { color: var(--ink); }
.mn-tab.on { background: #fff; color: var(--accent); box-shadow: 0 1px 3px rgba(0,0,0,.1); font-weight: 600; }
.mn-btn { display: inline-flex; align-items: center; gap: .4rem; height: 34px; padding: 0 .8rem; font-size: 12px; font-weight: 500; color: #3f3f46; background: #fff; border: 1px solid #e4e4e7; border-radius: 9px; cursor: pointer; }
.mn-btn:hover { border-color: #c7c7cd; background: #fafafa; }

/* ===== Diseño ===== */
.mn-grid { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 1rem; align-items: start; }

.mn-toc {
    position: sticky; top: 120px; max-height: calc(100vh - 140px); overflow-y: auto;
    background: rgba(255,255,255,.95); border: 1px solid var(--line); border-radius: 14px; padding: .8rem .6rem;
}
.mn-toc h2 { margin: .5rem .6rem .25rem; font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: #a1a1aa; font-weight: 600; }
.mn-toc h2:first-child { margin-top: 0; }
.mn-toc a { display: flex; gap: .5rem; align-items: baseline; padding: .28rem .6rem; border-radius: 8px; color: #52525b; text-decoration: none; font-size: 12px; line-height: 1.4; border-left: 2px solid transparent; }
.mn-toc a b { font-weight: 600; color: #a1a1aa; min-width: 1.4rem; font-size: 11px; }
.mn-toc a:hover { background: #f4f4f5; color: var(--ink); }
.mn-toc a.on { background: var(--accent-bg); color: var(--accent); border-left-color: var(--accent); font-weight: 600; }
.mn-toc a.on b { color: var(--accent); }
.mn-toc .oculto, .mn-sec.oculto, .mn-toc h2.oculto { display: none; }

.mn-main { min-width: 0; display: flex; flex-direction: column; gap: .9rem; }

.mn-sec {
    scroll-margin-top: 130px; padding: 1.2rem 1.4rem; background: rgba(255,255,255,.95);
    border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 4px 16px -14px rgba(15,23,42,.3);
}
.mn-sec > header { display: flex; gap: .75rem; align-items: center; padding-bottom: .8rem; margin-bottom: .9rem; border-bottom: 1px solid var(--line); }
.mn-ico { width: 34px; height: 34px; border-radius: 10px; background: var(--accent-bg); color: var(--accent); display: grid; place-items: center; flex: none; font-size: 17px; }
.mn-ico.num { font-weight: 700; font-size: 14px; font-family: 'Oswald', 'Inter', sans-serif; }
.mn-ico.ok { background: var(--ok-bg); color: var(--ok); }
.mn-sec h2 { margin: 0; font-family: 'Oswald', 'Inter', sans-serif; font-weight: 600; font-size: 1.12rem; color: var(--ink); line-height: 1.25; letter-spacing: .01em; }
.mn-sec header small { display: block; color: var(--muted); font-size: 12px; margin-top: .1rem; }
.mn-sec h3 { margin: 1.1rem 0 .35rem; font-size: 12.5px; font-weight: 700; color: var(--ink); letter-spacing: .01em; }
.mn-sec h3:first-of-type { margin-top: .2rem; }
.mn-sec p { margin: 0 0 .65rem; text-align: justify; hyphens: none; -webkit-hyphens: none; }
.mn-sec ul, .mn-sec ol { margin: 0 0 .75rem; padding-left: 1.25rem; }
.mn-sec li { margin: .18rem 0; text-align: justify; hyphens: none; }
.mn-sec li::marker { color: #a1a1aa; }
.mn-sec strong { color: var(--ink); font-weight: 600; }
.mn-sec code, .mn-sec kbd { font-family: Consolas, monospace; font-size: 11.5px; background: #f4f4f5; border: 1px solid var(--line); border-radius: 5px; padding: .05rem .35rem; color: #3f3f46; }
.mn-sec a { color: var(--accent); text-decoration: none; }
.mn-sec a:hover { text-decoration: underline; }
mark.hit { background: #fde68a; color: inherit; border-radius: 3px; padding: 0 1px; }

.mn-rol { display: inline-flex; align-items: center; gap: .3rem; margin-left: auto; font-size: 10.5px; font-weight: 600; padding: .15rem .55rem; border-radius: 999px; background: #f4f4f5; color: #52525b; border: 1px solid var(--line); white-space: nowrap; }

/* Avisos */
.mn-note { display: flex; gap: .65rem; padding: .65rem .85rem; margin: .5rem 0 .8rem; border-radius: 10px; border: 1px solid; font-size: 12.5px; line-height: 1.6; }
.mn-note svg { width: 16px; height: 16px; margin-top: 2px; }
.mn-note > div { flex: 1; min-width: 0; text-align: justify; hyphens: none; }
.mn-note.info { background: var(--accent-bg); border-color: #cfe3f8; color: #1e4e7f; }
.mn-note.warn { background: var(--warn-bg); border-color: #f5dfae; color: #7a4a0b; }
.mn-note.bad  { background: var(--bad-bg); border-color: #f6cccc; color: #8a1c1c; }
.mn-note.ok   { background: var(--ok-bg); border-color: #c4ebd1; color: #14532d; }
.mn-note strong { color: inherit; }

/* Pasos */
.mn-steps { list-style: none; padding: 0 !important; counter-reset: paso; display: grid; gap: .5rem; }
.mn-steps > li { counter-increment: paso; display: flex; gap: .7rem; padding: .55rem .75rem; background: #fafafa; border: 1px solid var(--line); border-radius: 10px; margin: 0; }
.mn-steps > li::before { content: counter(paso); flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; margin-top: 1px; }
.mn-steps > li > div { flex: 1; min-width: 0; }

/* Tarjetas */
.mn-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .6rem; margin: .4rem 0 .8rem; }
.mn-card { padding: .7rem .85rem; background: #fafafa; border: 1px solid var(--line); border-radius: 10px; }
.mn-card h4 { margin: 0 0 .25rem; font-size: 12.5px; color: var(--ink); font-weight: 600; }
.mn-card p, .mn-card li { font-size: 12.5px; }
.mn-card p:last-child, .mn-card ul:last-child { margin-bottom: 0; }

/* Tablas */
.mn-tw { overflow-x: auto; margin: .4rem 0 .9rem; border: 1px solid var(--line); border-radius: 10px; }
.mn table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.mn th { text-align: left; background: #f4f4f5; color: #3f3f46; font-weight: 600; padding: .5rem .7rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
.mn td { padding: .5rem .7rem; border-bottom: 1px solid #f1f1f3; vertical-align: top; }
.mn tr:last-child td { border-bottom: 0; }
.mn td:first-child { font-weight: 600; color: var(--ink); white-space: nowrap; }

/* Etiquetas de estado */
.mn-tag { display: inline-block; font-size: 11px; font-weight: 600; padding: .05rem .5rem; border-radius: 999px; border: 1px solid; white-space: nowrap; }
.mn-tag.g { color: var(--ok); background: var(--ok-bg); border-color: #c4ebd1; }
.mn-tag.b { color: var(--accent); background: var(--accent-bg); border-color: #cfe3f8; }
.mn-tag.y { color: var(--warn); background: var(--warn-bg); border-color: #f5dfae; }
.mn-tag.r { color: var(--bad); background: var(--bad-bg); border-color: #f6cccc; }
.mn-tag.n { color: #52525b; background: #f4f4f5; border-color: var(--line); }

/* Capturas */
.mn-fig { margin: .6rem 0 1rem; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fafafa; }
.mn-fig figcaption { display: flex; justify-content: space-between; gap: .5rem; flex-wrap: wrap; padding: .4rem .8rem; background: #f4f4f5; border-bottom: 1px solid var(--line); font-size: 11.5px; color: #52525b; font-weight: 500; }
.mn-fig figcaption span { color: var(--muted); font-weight: 400; }
.mn-fig .mn-img { display: flex; justify-content: center; padding: .7rem; }
.mn-fig img { max-width: 100%; max-height: 380px; width: auto; height: auto; border-radius: 8px; border: 1px solid var(--line); cursor: zoom-in; background: #fff; }
.mn-fig .mn-falta { display: none; padding: 1.2rem; color: #a1a1aa; font-size: 12px; text-align: center; }
.mn-fig p { margin: 0; padding: .5rem .8rem .65rem; font-size: 12px; color: var(--muted); border-top: 1px solid var(--line); }

/* Preguntas frecuentes */
.mn-faq { border: 1px solid var(--line); border-radius: 10px; margin-bottom: .45rem; background: #fff; overflow: hidden; }
.mn-faq summary { list-style: none; cursor: pointer; padding: .6rem .85rem; font-weight: 600; color: var(--ink); display: flex; gap: .6rem; align-items: center; }
.mn-faq summary::-webkit-details-marker { display: none; }
.mn-faq summary::after { content: ""; margin-left: auto; width: 7px; height: 7px; border-right: 1.8px solid #a1a1aa; border-bottom: 1.8px solid #a1a1aa; transform: rotate(45deg); transition: transform .2s; flex: none; }
.mn-faq[open] summary::after { transform: rotate(-135deg); }
.mn-faq[open] summary { background: #fafafa; border-bottom: 1px solid var(--line); }
.mn-faq > div { padding: .65rem .85rem .2rem; }

.mn-vacio { display: none; padding: 2rem 1rem; text-align: center; color: var(--muted); background: rgba(255,255,255,.95); border: 1px dashed #d4d4d8; border-radius: 14px; }
.mn-vacio.on { display: block; }

.mn-contacto { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .6rem; }
.mn-contacto .mn-card { display: flex; gap: .7rem; align-items: center; }
.mn-contacto .mn-card .mn-ico { width: 30px; height: 30px; font-size: 15px; }
.mn-contacto b { display: block; font-size: 11px; color: var(--muted); font-weight: 500; }

/* Visor de imágenes */
.mn-visor { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; background: rgba(9,9,11,.9); }
.mn-visor.on { display: flex; }
.mn-visor img { max-width: 94vw; max-height: 88vh; border-radius: 8px; transition: transform .15s; cursor: grab; user-select: none; -webkit-user-drag: none; }
.mn-visor-bar { position: absolute; top: 12px; right: 12px; display: flex; gap: .4rem; }
.mn-visor-bar button { width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(255,255,255,.15); color: #fff; font-size: 16px; cursor: pointer; display: grid; place-items: center; }
.mn-visor-bar button:hover { background: rgba(255,255,255,.28); }

.mn-arriba { position: fixed; right: 16px; bottom: 16px; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: #3f3f46; display: none; place-items: center; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.15); z-index: 40; }
.mn-arriba.on { display: grid; }

/* ===== Adaptable ===== */
@media (max-width: 960px) {
    .mn-grid { grid-template-columns: 1fr; }
    .mn-toc { position: static; max-height: none; display: none; }
    .mn-toc.abierto { display: block; }
}
.mn-btn.toc-toggle { display: none; }
@media (max-width: 960px) { .mn-btn.toc-toggle { display: inline-flex; } }
@media (max-width: 560px) {
    .mn { padding: .75rem .6rem 2.5rem; }
    .mn-sec { padding: .9rem .85rem; }
    .mn-hero { padding: .9rem; }
    .mn-hero h1 { font-size: 1.2rem; }
    .mn-tabs { width: 100%; }
    .mn-tab { flex: 1; justify-content: center; padding: .32rem .3rem; }
    .mn-rol { display: none; }
    .mn-sec p, .mn-sec li, .mn-note > div { text-align: left; }
}

/* ===== Impresión deshabilitada =====
   El manual se consulta solo en línea: al imprimir (o "Guardar como PDF") el navegador no muestra
   el contenido, solo este aviso. */
@media print {
    body.mn-body { background: #fff; padding: 0; }
    body.mn-body * { display: none !important; }
    body.mn-body::after {
        content: "La impresión del Manual de usuario no está disponible. Consúltelo en línea en el Sistema de Convocatorias de la DRE Huánuco.";
        display: block;
        margin: 3cm 2cm;
        font: 14pt/1.5 'Segoe UI', Arial, sans-serif;
        color: #0b3d91;
        text-align: center;
    }
}