/* Estilos SOLO del manual (manual.php). Se carga despues de estilo.css, asi que
   sus reglas ganan donde coinciden (.badge, .card, .note, .steps...). Se deja
   aparte para no cargar el CSS comun con cosas que solo usa el manual. */

#manual { padding-bottom: 10px; }
#manual h2 { font-size: 21px; margin: 30px 0 12px; display: flex; align-items: center; gap: 10px; }
#manual h2 .n {
  background: var(--azul); color: #fff; width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; font-size: 15px; flex: none;
}
#manual h2 .n.ok { background: var(--verde); }
#manual h3 { font-size: 17px; margin: 20px 0 8px; }
#manual .badge { display: inline-block; background: rgba(255,255,255,.18); padding: 3px 12px; border-radius: 999px; font-size: 13px; margin: 10px 6px 0 0; }

#manual header.portada {
  background: linear-gradient(135deg, #1d2b64, var(--azul));
  color: #fff; border-radius: 16px; padding: 26px 24px; margin-bottom: 18px;
}
#manual header.portada h1 { margin: 0 0 6px; font-size: 25px; }
#manual header.portada p { margin: 0; opacity: .94; }

/* Recuadro destacado de la puesta en marcha (lo bloqueante va primero) */
.bloqueantes { background: #fff; border: 2px solid var(--verde); border-radius: 16px; padding: 4px 22px 20px; margin-bottom: 18px; }
.bloqueantes h2 { margin-top: 20px; }
.bloqueantes .lead { font-size: 16px; margin: 0 0 12px; }
.bloqueantes .steps li::before { background: var(--verde); }

#manual .card { margin-bottom: 14px; }
#manual .opt { border-left: 4px solid var(--azul); }
#manual table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 14.5px; }
#manual th, #manual td { text-align: left; padding: 9px 11px; border-bottom: 1px solid var(--borde); vertical-align: top; }
#manual th { background: var(--azul-claro); font-weight: 600; }
#manual code { background: #eef1f7; padding: 2px 7px; border-radius: 6px; font-size: 13.5px; word-break: break-word; }
#manual .note { border-radius: 12px; padding: 12px 15px; margin: 12px 0; font-size: 14.5px; }
.n-warn { background: #fff8ea; border: 1px solid #f2ddb0; }
.n-bad { background: var(--rojo-claro); border: 1px solid #f3c4c4; }
.n-info { background: var(--azul-claro); border: 1px solid #ccd8ff; }
.n-ok { background: var(--verde-claro); border: 1px solid #bbf7d0; }
#manual .note ul { margin: 6px 0 0; }

/* Pasos numerados (los del manual, verdes en la puesta en marcha) */
.steps { counter-reset: s; padding-left: 0; list-style: none; margin: 8px 0; }
.steps li { position: relative; padding-left: 40px; margin-bottom: 12px; }
.steps li::before {
  counter-increment: s; content: counter(s);
  position: absolute; left: 0; top: 1px; width: 27px; height: 27px;
  background: var(--azul); color: #fff; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 13.5px; font-weight: 700;
}
#manual ul { margin: 8px 0; padding-left: 22px; }
#manual li { margin-bottom: 5px; }
#manual details { background: #fff; border: 1px solid var(--borde); border-radius: 12px; padding: 12px 16px; margin-bottom: 10px; font-size: 14.5px; }
#manual summary { cursor: pointer; font-weight: 600; }

/* Indice */
.toc a { color: var(--azul); font-weight: 600; text-decoration: none; }
.toc a:hover { text-decoration: underline; }
.toc ol { margin: 6px 0; padding-left: 24px; }
.toc li { margin-bottom: 3px; }

/* Maquetas del panel hechas con CSS (sin imagenes) */
.scr { background: #e8ecf5; border-radius: 16px; padding: 16px; margin: 16px 0; display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }
.phone { width: 265px; background: #fff; border-radius: 22px; box-shadow: 0 4px 20px rgba(0,0,0,.12); overflow: hidden; border: 1px solid #d0d5e0; flex: none; }
.phone .stbar { background: #1a1a2e; color: #fff; padding: 10px 14px 6px; font-size: 10px; display: flex; justify-content: space-between; }
.phone .appbar { background: var(--azul); color: #fff; padding: 10px 14px; font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 6px; border-bottom: 1px solid rgba(0,0,0,.08); }
.phone .appbar .s { font-size: 11px; font-weight: 400; opacity: .8; margin-left: auto; }
.phone .body { padding: 8px 0; min-height: 340px; font-size: 13px; }
.ph-row { display: flex; align-items: center; padding: 10px 14px; border-bottom: 1px solid #f0f2f6; gap: 10px; }
.ph-row .l { flex: 1; }
.ph-row .l .t { font-weight: 600; font-size: 13.5px; }
.ph-row .l .h { font-size: 11.5px; color: var(--gris); margin-top: 1px; }
.sw { width: 38px; height: 22px; background: #c8cdd8; border-radius: 99px; position: relative; flex: none; transition: .2s; }
.sw.on { background: var(--azul); }
.sw::after { content: ''; width: 18px; height: 18px; background: #fff; border-radius: 50%; position: absolute; top: 2px; left: 2px; transition: .2s; }
.sw.on::after { left: 18px; }
.cbx { width: 22px; height: 22px; border: 2px solid #b9c0cf; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: transparent; flex: none; }
.cbx.on { background: var(--azul); border-color: var(--azul); color: #fff; }
.x { color: #98a1b3; font-size: 15px; padding: 0 4px; flex: none; }
.ph-row .val { color: var(--tinta); font-size: 13px; text-align: right; flex: none; min-width: 40px; }
.ph-row .btn { background: var(--azul); color: #fff; border: none; border-radius: 8px; padding: 5px 12px; font-size: 11.5px; font-weight: 600; cursor: pointer; flex: none; }
.ph-row .btn.g { background: var(--azul-claro); color: var(--azul); }
.ph-hdr { background: var(--azul-claro); color: var(--gris); font-size: 11px; font-weight: 600; padding: 5px 14px; text-transform: uppercase; letter-spacing: .5px; }
.st-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; }
.st-on { background: #e2f5ec; color: var(--verde); }
.st-off { background: #fdeaea; color: var(--rojo); }
.st-warn { background: #fdf0dd; color: #b3690a; }

@media (max-width: 600px) {
  .phone { width: 100%; }
  #manual header.portada h1 { font-size: 21px; }
}