/* public_fhir/css/docs.css */
/* Guia de integracion de la API SATI-Q, con el aspecto de una Guia de Implementacion publicada
   por el IG Publisher de HL7: cabecera con estado, barra de navegacion, migas, caja de publicacion,
   numeracion automatica de secciones y pie institucional. */
:root {
    --navbar-bg: #dd4442;          /* barra de navegacion */
    --stripe-bg: #999999;          /* franja superior */
    --footer-bg: #707070;          /* fondo del pie */
    --footer-container-bg: #dd4442;/* contenedor del pie */
    --footer-text: #ffffff;
    --footer-link: #81bef7;
    --footer-destacado: #ffff77;
    --ig-header-bg: #f5f5f5;
    --ig-status-color: maroon;
    --link: #428bca;
    --link-hover: #2a6496;
    --publish-box-bg: #ffff99;
    --toc-box-bg: #ffeb7e;
    --nota-bg: #fff2ff;
    --nota-borde: #ffa0ff;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 20px; }
body { margin:0; font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; line-height:1.42857143; color:#333; background:#fff; }
code, pre { font-family:Menlo,Monaco,Consolas,"Courier New",monospace; }
a { color:var(--link); text-decoration:none; }
a:hover, a:focus { color:var(--link-hover); text-decoration:underline; }
.container { max-width:1140px; margin:0 auto; padding:0 15px; }
.segment { position:relative; }

/* Cabecera con el estado de la guia */
#segment-header { background:var(--ig-header-bg); }
#segment-header > .container { background:#fff; padding-top:10px; padding-bottom:6px; }
#ig-status { color:var(--ig-status-color); }
#ig-status p { margin:0 0 8px; }
#ig-status .titulo { font-size:16px; font-weight:bold; }
#ig-status .version { display:inline-block; font-size:13px; }
#ig-status img { vertical-align:-2px; margin-left:4px; }

/* Barra de navegacion */
#segment-navbar { background:var(--ig-header-bg); }
#stripe { position:absolute; left:0; right:0; top:0; height:8px; background:var(--stripe-bg); }
.navbar { background:var(--navbar-bg); margin:8px 0 0; border-radius:0; min-height:44px; }
.navbar ul { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; }
.navbar ul li a { display:block; color:#e6e6e6; padding:12px 15px; font-size:14px; }
.navbar ul li a:hover { background:rgba(0,0,0,0.12); color:#fff; text-decoration:none; }
.navbar ul li a.activo { background:rgba(0,0,0,0.22); color:#fff; }

/* Migas */
#segment-breadcrumb { background:#fff; }
.breadcrumb { list-style:none; display:flex; flex-wrap:wrap; padding:8px 15px; margin:8px 0; background:#f5f5f5; border-radius:4px; font-size:13px; }
.breadcrumb li + li:before { content:"/\00a0"; padding:0 5px; color:#ccc; }

/* Contenido */
#segment-content { background:#fff; }
#segment-content > .container { padding-top:10px; padding-bottom:30px; }
.inner-wrapper { padding-bottom:20px; }
#publish-box { background:var(--publish-box-bg); border:1px solid #0a0008; padding:5px; font-size:13px; margin:0 0 14px; }
/* Numeracion automatica de secciones, como en las guias publicadas */
#segment-content .inner-wrapper { counter-reset: section; }
h2 { counter-reset: sub-section; }
h3 { counter-reset: composite; }
h2:before { color:silver; counter-increment:section; content:counter(section) " "; }
h3:before { color:silver; counter-increment:sub-section; content:counter(section) "." counter(sub-section) " "; }
h1 { font-size:36px; margin:20px 0 10px; font-weight:500; line-height:1.1; }
h2 { font-size:28px; margin:34px 0 10px; font-weight:500; line-height:1.1; scroll-margin-top:15px; }
h3 { font-size:22px; margin:22px 0 10px; font-weight:500; line-height:1.1; scroll-margin-top:15px; }
h4 { font-size:17px; margin:18px 0 8px; font-weight:600; }
p { margin:0 0 11px; }
ul, ol { margin:0 0 11px; padding-left:26px; }
li { margin-bottom:4px; }

/* Tabla de metadatos del recurso, como la que encabeza cada pagina de una guia */
table.colsi { width:100%; border-collapse:collapse; margin:0 0 16px; font-size:13px; }
table.colsi td { border:1px solid #e3e3e3; padding:6px 9px; background:#f9f9f9; }
table.colsi i { color:#666; }
.copy-text { font-family:Menlo,Monaco,Consolas,monospace; font-size:12px; }

/* Tablas de contenido */
.tabla-wrap { overflow-x:auto; margin:0 0 16px; }
table.grid { width:100%; border-collapse:collapse; font-size:13px; }
table.grid th { background:#f0f0f0; text-align:left; padding:7px 10px; border:1px solid #dcdcdc; font-weight:bold; }
table.grid td { padding:6px 10px; border:1px solid #e3e3e3; vertical-align:top; }
table.grid tbody tr:nth-child(even) td { background:#fafafa; }
table.grid td.m, table.grid td code, code.li { font-family:Menlo,Monaco,Consolas,monospace; font-size:12px; }
code.li { background:#f7f7f9; border:1px solid #e1e1e8; padding:1px 4px; border-radius:3px; color:#c7254e; }
.si { color:#3c763d; font-weight:bold; }
.no { color:#aaa; }

/* Bloques de codigo */
.cod { position:relative; margin:0 0 16px; }
.cod pre { background:#f7f7f9; border:1px solid #e1e1e8; border-radius:4px; padding:10px 12px; margin:0; overflow-x:auto; font-size:12.5px; line-height:1.5; color:#333; }
.cod-btn { position:absolute; top:6px; right:6px; background:#fff; border:1px solid #ccc; color:#666; border-radius:3px; padding:2px 9px; font-size:11px; cursor:pointer; opacity:0; transition:opacity 0.15s; font-family:inherit; }
.cod:hover .cod-btn { opacity:1; }
.cod-btn:hover { background:var(--navbar-bg); color:#fff; border-color:var(--navbar-bg); }

/* Cajas de nota, al estilo de las notas de las guias */
.nota { background:var(--nota-bg); border-left:4px solid var(--nota-borde); padding:10px 14px; margin:0 0 16px; font-size:13px; }
.nota .tit { font-weight:bold; display:block; margin-bottom:3px; }
.nota-ojo { background:#fffbe6; border-left-color:#e0a800; }
.nota-ok { background:#f2f8f4; border-left-color:#4a9c6d; }

/* Indice de la pagina, como el cuadro de contenidos de las guias */
#toc-box { background:var(--toc-box-bg); border:1px solid navy; padding:10px 14px; margin:0 0 20px; font-size:13px; }
#toc-box .tit { font-weight:bold; margin-bottom:6px; }
#toc-box ol { margin:0; padding-left:22px; }
#toc-box ol ol { padding-left:20px; margin-top:3px; }
#toc-box li { margin-bottom:2px; }
#toc-box a { color:#333; }

.verbo { display:inline-block; font-size:11px; font-weight:bold; padding:1px 7px; border-radius:3px; margin-right:6px; vertical-align:middle; }
.v-get { background:#dff0d8; color:#3c763d; }
.v-post { background:#d9edf7; color:#31708f; }
.v-put { background:#fcf3df; color:#8a6100; }
.v-del { background:#f7dedd; color:#a4302c; }

/* Pie */
#segment-footer { background:var(--footer-bg); }
#segment-footer > .container { background:var(--footer-container-bg); color:var(--footer-text); }
#segment-footer .inner-wrapper { padding:4px 20px; }
#segment-footer p { padding-bottom:0; margin-bottom:0; color:var(--footer-text); font-size:13px; }
#segment-footer a { color:var(--footer-link); }
#segment-footer .destacado { color:var(--footer-destacado); }
#segment-post-footer { background:#f5f5f5; margin-top:17px; color:var(--ig-status-color); text-align:center; padding:15px; font-size:13px; }

@media (max-width: 768px) {
    h1 { font-size:27px; }
    h2 { font-size:22px; }
    h3 { font-size:18px; }
    .navbar ul { flex-direction:column; }
    .navbar ul li a { padding:9px 15px; border-bottom:1px solid rgba(0,0,0,0.08); }
}