/* ============================================================
   ESTILO COMPARTIDO DE LOS MANUALES — Sesión 186
   ============================================================

   Un solo archivo para todos los manuales de public/ayuda/.

   POR QUÉ COMPARTIDO Y NO COPIADO EN CADA UNO: son diecisiete
   manuales. Con el estilo pegado adentro de cada archivo, cambiar el
   ancho de una tabla obliga a editar diecisiete veces, y basta que
   uno quede afuera para que ese manual se vea distinto que el resto
   sin que nadie lo note.

   Cada manual sigue siendo una página completa que se puede abrir
   sola en una pestaña: lo único que se movió afuera es el estilo.
   ============================================================ */

:root{
    --negro:var(--ink, #15181D); --tinta:var(--ink, #15181D); --gris:var(--muted, #5B6370); --gris2:var(--muted, #5B6370);
    --linea:#E5E7EB; --fondo:#F8FAFC;
    --amarillo:#FACC15; --amarillo-osc:#B45309;
    --verde:#10B981; --rojo:#EF4444;
  }
  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    margin:0; background:#fff; color:var(--tinta);
    font-family:var(--sans);
    font-size:15px; line-height:1.62;
  }
  main{ max-width:820px; margin:0 auto; padding:26px 26px 90px; }

  h1{ font-size:24px; font-weight:600; margin:0 0 4px; color:var(--negro); letter-spacing:-0.01em; }
  .baja{ color:var(--gris); margin:0 0 26px; font-size:14px; }

  /* Cada capítulo. El scroll-margin deja aire arriba cuando se salta a uno:
     sin él, el título queda pegado al borde y parece que empieza a la mitad. */
  .cap{ scroll-margin-top:14px; padding-top:6px; margin-bottom:34px; }
  .cap h2{
    font-size:17px; font-weight:600; color:var(--negro); margin:0 0 10px;
    padding-bottom:7px; border-bottom:2px solid var(--amarillo); letter-spacing:-.2px;
  }
  h3{ font-size:15px; font-weight:600; color:var(--negro); margin:20px 0 5px; }
  p{ margin:0 0 11px; }
  b,strong{ color:var(--negro); }

  ol.pasos{ list-style:none; margin:0 0 14px; padding:0; counter-reset:p; }
  ol.pasos li{ counter-increment:p; position:relative; padding-left:32px; margin-bottom:8px; }
  ol.pasos li::before{
    content:counter(p); position:absolute; left:0; top:1px;
    width:22px; height:22px; border-radius:50%; background:var(--negro); color:#fff;
    font-size:12px; font-weight:600; display:flex; align-items:center; justify-content:center;
  }
  ul{ padding-left:20px; margin:0 0 12px; } li{ margin-bottom:4px; }

  table{ width:100%; border-collapse:collapse; margin:12px 0 18px; font-size:14px; }
  th{ text-align:left; font-size:12px; letter-spacing:.1em; text-transform:uppercase;
      color:var(--gris); font-weight:600; padding:0 10px 6px 0; border-bottom:2px solid var(--negro); }
  td{ padding:9px 10px 9px 0; border-bottom:1px solid var(--linea); vertical-align:top; }
  td:last-child, th:last-child{ padding-right:0; }

  .caja{ border:1px solid var(--linea); border-radius:11px; padding:13px 16px; margin:14px 0; background:var(--fondo); }
  .caja .rot{ font-size:12px; letter-spacing:.11em; text-transform:uppercase; font-weight:600; color:var(--gris); margin-bottom:4px; }
  .ojo{ border:none; border-left:4px solid var(--amarillo); background:#FEFCE8; border-radius:0 11px 11px 0; padding:13px 16px; margin:14px 0; }
  .ojo .rot{ color:var(--amarillo-osc); }
  .alerta{ border:none; border-left:4px solid var(--rojo); background:#FEF2F2; border-radius:0 11px 11px 0; padding:13px 16px; margin:14px 0; }
  .alerta .rot{ color:#B91C1C; }

  .pant{ display:inline-block; background:#fff; border:1px dashed #CBD5E1; border-radius:5px;
         padding:1px 7px; font-size:13px; color:var(--negro); }
  .bot{ display:inline-block; background:var(--amarillo); color:var(--negro); border-radius:5px;
        padding:1px 8px; font-weight:600; font-size:13px; }
  .bot.osc{ background:var(--negro); color:#fff; }
  .bot.rojo{ background:var(--rojo); color:#fff; }

  figure{ margin:14px 0 18px; }
  figure img{ width:100%; display:block; border:1px solid var(--linea); border-radius:10px; }
  figure img.chica{ width:56%; margin:0 auto; }
  figcaption{ font-size:12px; color:var(--gris2); margin-top:6px; font-style:italic; text-align:center; }

  .llave{ display:inline-flex; width:30px; height:24px; border-radius:6px; border:1.5px solid var(--linea);
          background:#fff; align-items:center; justify-content:center; vertical-align:middle; }
  .llave svg{ width:14px; height:14px; }
  .llave.on{ border-color:var(--verde); } .llave.on svg{ fill:var(--verde); }
  .llave.off svg{ fill:var(--gris2); }
  .llave.duda svg{ fill:#CBD5E1; }
  .llave.bloq{ background:var(--rojo); border-color:var(--rojo); } .llave.bloq svg{ fill:#fff; }

  .punto{ display:inline-block; width:10px; height:10px; border-radius:50%; vertical-align:middle; margin-right:5px; }

  /* Lo que resalta el buscador de la plataforma. Va acá y no en la
     aplicación porque el texto vive en este documento. */
  mark.busca{ background:#FDE68A; color:var(--negro); border-radius:3px; padding:0 2px; }
  mark.busca.actual{ background:var(--amarillo); box-shadow:0 0 0 2px rgba(202,138,4,.45); }

  .pieDoc{ border-top:1px solid var(--linea); margin-top:40px; padding-top:14px;
           font-size:12px; color:var(--gris2); }

  /* Abierto solo en una pestaña conviene un poco más de aire arriba. */
  @media (min-width:900px){ main{ padding-top:34px; } }
  @media print{ .cap{ page-break-inside:avoid; } }

/* Marca de los capítulos que solo aplican a ciertos clientes o a un
   administrador. Un manual que documenta pantallas que el lector no
   tiene lo hace buscar botones que no existen. */
.solo{ background:#EEF2FF; border:1px solid #C7D2FE; color:#3730A3;
       border-radius:8px; padding:7px 12px; font-size:13px;
       display:block; margin:0 0 14px; }

/* Listas de columnas o campos, donde el orden importa y la lectura es
   de barrido. */
.mono{ background:var(--fondo); border:1px solid var(--linea); border-radius:9px;
       padding:10px 14px; font-size:13px; color:var(--negro); line-height:1.9;
       /* En los manuales .mono es una caja de lectura, no un código: va en la
          letra normal (tipografia.css la pondría en Mono 600). */
       font-family:var(--sans); font-weight:400; }

/* Un código o identificador dentro de una frase. */
.mono2{ font-family:var(--mono); font-size:13px;
        background:var(--fondo); border:1px solid var(--linea);
        border-radius:4px; padding:1px 6px; color:var(--negro); }