/* =========================================================================
   Manual SoftRestaurant 12 -- capa visual compartida
   =========================================================================
   Identidad: TEMA OSCURO real por defecto (no solo via prefers-color-scheme).
   El tema claro sigue disponible como alterno explicito via
   :root[data-theme="light"] (boton en la topbar, ver manual.js), pensado
   para impresion o para compartir en pantallas claras.

   Paleta oscura: muestreada por pixel de capturas reales de SR12 en vivo
   (ver assets/img/u08_cap7/live_gastos.png, live_cuentasporcobrar.png,
   live_subtipogastos.png, live_pagosaproveedoresabono.png). Cada variable
   documenta de donde salio su valor. Los tonos que no aparecen en esas
   capturas (azul de "nota", verde de "ok") se tomaron de las variables CSS
   reales de https://softrestaurant.com/soft-restaurant-12 (--blue, --green)
   en vez de inventarse, para quedarse dentro de la misma identidad de marca.

   Tipografia: softrestaurant.com carga Montserrat (titulos) + Lato (cuerpo)
   via Google Fonts. Este sitio se mantiene sin dependencias externas (sin
   CDNs ni @import), asi que se declaran esos mismos nombres como PRIMERA
   opcion (se usan gratis si el visitante ya los tiene instalados) con una
   pila de reemplazo del sistema que imita el mismo caracter geometrico
   (titulos) / humanista (cuerpo) -- Segoe UI es la fuente base real de la
   propia aplicacion SR12 en Windows.
   ========================================================================= */

:root{
  color-scheme: dark;

  /* ---- fondos oscuros: muestreados de live_gastos.png / live_cuentasporcobrar.png /
     live_subtipogastos.png (toolbar y panel de contenido, ~40-54% de cada captura) ---- */
  --bg:#19191a;          /* live_subtipogastos.png, toolbar derecho @ (400,80) */
  --surface:#242428;     /* live_gastos.png, toolbar @ (210,90); dominante en las 4 capturas */
  --surface-2:#2b2b2f;   /* live_gastos.png, tono secundario dominante @ ~(720,35) */
  --line:#3a3a3f;        /* derivado: interpolado entre surface y muted (las capturas no
                             muestran un borde propio; los campos se funden con el fondo) */

  /* ---- texto ---- */
  --fg:#ffffff;          /* texto de titulo/etiquetas muestreado en las 4 capturas */
  --fg-soft:#e4e4e7;     /* derivado: un paso bajo blanco puro, para cuerpo de texto largo */
  --muted:#b7b7bd;       /* derivado (gris frio, mismo tinte que --bg) ajustado para AA */

  /* ---- naranja de marca: barra de titulo, identica en las 4 capturas oscuras
     (p.ej. live_gastos.png @ (500,12): #ed6c20) y EXACTA a --orange en el CSS
     real de softrestaurant.com ---- */
  --accent:#ed6c20;          /* relleno solido: topbar, botones, activo, iconos, bordes */
  --accent-contrast:#1a1006; /* texto oscuro legible sobre relleno naranja pequeno */
  --link:#ff9a52;            /* aclarado del mismo naranja, para texto/enlaces sobre fondo oscuro (AA) */
  --accent-bg:#443027;       /* mezcla ~16% del naranja sobre --surface, para pildoras */

  /* ---- rojo/marron: boton "Cerrar"/"Cancelar" real, identico en live_gastos.png
     @ (965,40), live_subtipogastos.png @ (615,60) y live_pagosaproveedoresabono.png
     @ (280,340): #7f1d1d ---- */
  --danger:#7f1d1d;
  --danger-bg:#482124;       /* mezcla ~40% de --danger sobre --surface */

  /* ---- azul "nota": no aparece en las capturas oscuras muestreadas; tomado de
     la variable --blue real de softrestaurant.com para no inventar un color
     fuera de la identidad de marca ---- */
  --note-line:#66c3ff;
  --note-bg:#2d3a46;         /* mezcla ~14% de --note-line sobre --surface */

  /* ---- verde "ok": misma logica, tomado de --green de softrestaurant.com ---- */
  --ok:#5fd98a;
  --ok-bg:#274233;

  /* ---- morado: muestreado EXACTO del logotipo "Restaurant" en
     docx_pantalla_principal.png @ (650,585): #584569 -- tambien identico a
     --purple en el CSS real de softrestaurant.com. Acento terciario/decorativo. ---- */
  --accent-purple:#584569;

  --sidebar-bg:var(--surface);
  --code-bg:var(--surface-2);

  --font-display:"Montserrat","Segoe UI Semibold","Segoe UI","Century Gothic",Arial,sans-serif;
  --font-body:"Lato","Segoe UI",Calibri,Arial,sans-serif;

  --maxw:1360px;      /* ancho maximo del shell completo (sidebar + contenido) */
  --measure:74ch;     /* longitud de linea comoda para lectura larga (solo texto corrido) */
  --radius:10px;
  --topbar-h:56px;
  --shadow:0 2px 14px rgba(0,0,0,.45);
}

/* Tema claro explicito (boton en la topbar). Pensado para imprimir o
   compartir sobre fondo blanco -- no es el default, hay que pedirlo. */
:root[data-theme="light"]{
  color-scheme: light;
  --bg:#ffffff;
  --surface:#f6f6f6;      /* --white-dif exacto de softrestaurant.com */
  --surface-2:#eeeef0;
  --line:#e2e2e6;

  --fg:#1c1e23;           /* --black exacto de softrestaurant.com */
  --fg-soft:#33353b;
  --muted:#5a5d64;

  --accent:#ed6c20;
  --accent-contrast:#1a1006;
  --link:#b34f14;         /* mismo naranja oscurecido para contraste AA sobre blanco */
  --accent-bg:#fdede4;

  --danger:#7f1d1d;
  --danger-bg:#f2e8e8;

  --note-line:#2f8fd1;
  --note-bg:#e7f5ff;

  --ok:#2c6b45;
  --ok-bg:#e7f9ed;

  --accent-purple:#584569;
  --shadow:0 2px 10px rgba(20,20,25,.12);
}

/* Impresion: siempre clara, sin importar el tema activo en pantalla. */
@media print{
  :root{
    color-scheme: light;
    --bg:#ffffff; --surface:#ffffff; --surface-2:#f2f2f2; --line:#ccc;
    --fg:#111214; --fg-soft:#222; --muted:#444;
    --accent:#c9550f; --link:#9a4310; --accent-bg:#fbeee6;
    --danger:#7f1d1d; --danger-bg:#f2e8e8;
    --note-line:#2f8fd1; --note-bg:#eef7ff;
    --ok:#2c6b45; --ok-bg:#eaf7ee;
    --accent-purple:#584569;
  }
  .ms-topbar, .ms-sidebar, .ms-menutoggle, .ms-themetoggle, .ms-lightbox,
  .ms-skip, .ms-search{ display:none !important; }
  .ms-layout{ display:block !important; }
  .ms-main{ max-width:none !important; padding:0 !important; }
  /* Las capturas se pintan en <canvas> solo cuando se acercan a la pantalla;
     manual.js las fuerza todas en 'beforeprint' para que la impresion no
     salga con huecos. */
  .ms-shotimg{ box-shadow:none !important; break-inside:avoid; }
  .ms-shotimg::after{ display:none !important; }
  .ms-section{ break-inside:auto; }
  .ms-title{ break-after:avoid; }
  a[href]::after{ content:""; }
}

*{box-sizing:border-box;}
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--topbar-h) + 14px); }

/* Quien pide menos movimiento en su sistema no deberia recibir desplazamiento
   suave, paneles que se deslizan ni figuras que se levantan al pasar el raton
   (WCAG 2.3.3). Se apaga la animacion, no la funcionalidad: todo sigue
   ocurriendo, pero de golpe. */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .ms-shotimg:hover{ transform:none; }
  .ms-chapterlist li:hover{ transform:none; }
}
body{
  margin:0; background:var(--bg); color:var(--fg-soft);
  font-family:var(--font-body); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  transition:background-color .15s ease, color .15s ease;
}
h1,h2,h3,h4{ font-family:var(--font-display); color:var(--fg); line-height:1.25; }
a{color:var(--link); text-decoration-thickness:1.5px; text-underline-offset:2px;}
a:hover{color:var(--accent);}
::selection{ background:var(--accent); color:#fff; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:3px; }

/* scrollbar tematizado (Firefox + Chromium/Edge/WebKit; sin dependencias) */
*{ scrollbar-color:var(--surface-2) var(--bg); scrollbar-width:thin; }
::-webkit-scrollbar{ width:12px; height:12px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:var(--surface-2); border-radius:8px; border:3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover{ background:var(--line); }

/* ---------- topbar ---------- */
.ms-topbar{
  position:sticky; top:0; z-index:30; height:var(--topbar-h);
  background:var(--surface); /* fallback solido si color-mix() no aplica */
  background:color-mix(in srgb, var(--surface) 92%, transparent);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.ms-topbar-inner{
  max-width:var(--maxw); margin:0 auto; height:100%;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:0 clamp(14px,3vw,32px);
}
.ms-topbar .ms-brand{
  display:flex; align-items:center; gap:10px; text-decoration:none; min-width:0;
}
/* Logotipo oficial. Se sirven dos archivos en vez de recolorear con CSS
   porque es un PNG: el morado de marca (#584569) sobre la topbar oscura
   (#242428) da 1.82:1, por debajo del 3:1 que pide WCAG 1.4.11 para
   graficos no textuales. Ver _shared/make_brand_assets.py. */
.ms-brand-logo{ height:26px; width:auto; flex:none; display:block; }
.ms-brand-logo-light{ display:none; }
:root[data-theme="light"] .ms-brand-logo-dark{ display:none; }
:root[data-theme="light"] .ms-brand-logo-light{ display:block; }
.ms-brand-text{
  font-family:var(--font-display); font-weight:800; letter-spacing:.01em;
  color:var(--fg); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-size:1.02rem;
}
.ms-brand-text b, .ms-brand-text strong{ color:var(--accent); font-weight:800; }
.ms-brand .ms-brand-sub{
  font-family:var(--font-display); color:var(--muted); font-weight:600; font-size:.9rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Enlace de salto: invisible hasta que recibe el foco con el tabulador.
   Sin el, en cap-04 hay que recorrer 79 enlaces de la barra lateral antes
   de llegar al texto del capitulo. */
.ms-skip{
  position:absolute; left:8px; top:-60px; z-index:200;
  background:var(--accent); color:var(--accent-contrast);
  padding:10px 16px; border-radius:0 0 var(--radius) var(--radius);
  font-weight:700; text-decoration:none; transition:top .15s ease;
}
.ms-skip:focus{ top:0; color:var(--accent-contrast); }
.ms-main:focus{ outline:none; }

.ms-topbar-actions{ display:flex; align-items:center; gap:8px; flex:none; }
.ms-iconbtn{
  display:none; align-items:center; justify-content:center;
  width:34px; height:34px; padding:0; border-radius:8px;
  border:1px solid var(--line); background:transparent; color:var(--fg-soft);
  cursor:pointer; line-height:0;
}
.ms-iconbtn:hover{ background:var(--surface-2); color:var(--fg); }
.ms-iconbtn svg{ width:18px; height:18px; }

.ms-searchtoggle{ display:inline-flex; }
.ms-themetoggle{ display:inline-flex; }

/* Descarga del manual completo en PDF. Lleva texto ademas del icono porque
   una flecha sola no dice QUE se descarga; en pantallas angostas se queda
   solo el icono para no empujar al selector de idioma fuera de la barra. */
.ms-pdfbtn{
  display:inline-flex; gap:7px; width:auto; padding:0 11px;
  text-decoration:none; font-family:var(--font-display);
  font-size:.78rem; font-weight:800; letter-spacing:.04em; line-height:1;
}
.ms-pdfbtn:hover{ background:var(--surface-2); color:var(--fg); }

/* Version de la portada: aqui si se puede decir que es, y es la unica que
   queda en telefono, donde el boton de la barra no cabe sin encimarse con
   el logotipo. */
.ms-pdfline{ margin:22px 0 4px; display:flex; align-items:center;
             flex-wrap:wrap; gap:10px; }
.ms-pdflink{
  display:inline-flex; align-items:center; gap:9px;
  padding:10px 15px; border-radius:10px; text-decoration:none;
  /* El texto va en --link, no en --accent: el naranja de marca sobre blanco
     da 3.1:1 y esto es texto de 15px, que necesita 4.5:1. El borde si puede
     ir en --accent (grafico, le basta 3:1). */
  border:1px solid var(--accent); color:var(--link); background:transparent;
  font-family:var(--font-display); font-weight:700; font-size:.95rem;
}
.ms-pdflink:hover{ background:var(--accent); color:var(--accent-contrast); }
.ms-pdflink svg{ width:18px; height:18px; flex:none; }
.ms-pdfsize{ color:var(--muted); font-size:.85rem; }
.ms-themetoggle .icon-sun{ display:none; }
:root[data-theme="light"] .ms-themetoggle .icon-sun{ display:block; }
:root[data-theme="light"] .ms-themetoggle .icon-moon{ display:none; }

.ms-langswitch{display:flex; gap:6px;}
.ms-langswitch a, .ms-menutoggle{
  border:1px solid var(--line); border-radius:8px; padding:6px 12px; font-size:.82rem;
  font-weight:700; letter-spacing:.03em;
  text-decoration:none; color:var(--fg-soft); background:transparent; cursor:pointer;
}
.ms-langswitch a:hover{ color:var(--fg); border-color:var(--muted); }
.ms-langswitch a.active{background:var(--accent); color:var(--accent-contrast); border-color:var(--accent);}
.ms-menutoggle{ display:none; width:34px; height:34px; padding:0; font-size:1.1rem; align-items:center; justify-content:center; }

.ms-breadcrumbs{
  font-size:.85rem; color:var(--muted); margin:0 0 10px; padding-top:2px;
}
.ms-breadcrumbs a{ color:var(--muted); }
.ms-breadcrumbs a:hover{ color:var(--link); }

/* ---------- layout: sidebar + contenido ---------- */
.ms-layout{ display:flex; align-items:flex-start; max-width:var(--maxw); margin:0 auto; }
.ms-sidebar{
  width:272px; flex:0 0 272px; background:var(--sidebar-bg);
  border-right:1px solid var(--line);
  padding:22px 16px 40px; position:sticky; top:var(--topbar-h);
  height:calc(100vh - var(--topbar-h)); overflow-y:auto;
}
.ms-sidebar h3{
  font-family:var(--font-display); font-size:.72rem; text-transform:uppercase;
  letter-spacing:.09em; color:var(--muted); margin:22px 0 8px; font-weight:700;
}
.ms-sidebar h3:first-child{ margin-top:4px; }
.ms-sidebar ul{list-style:none; margin:0; padding:0;}
.ms-sidebar li a{
  display:block; padding:7px 10px; margin:1px 0; border-radius:7px; text-decoration:none;
  color:var(--fg-soft); font-size:.9rem; border-left:3px solid transparent;
}
.ms-sidebar li a:hover{background:var(--surface-2); color:var(--fg);}
.ms-sidebar li a.active{
  background:var(--accent-bg); color:var(--link); border-left-color:var(--accent); font-weight:700;
}

.ms-main{ flex:1; min-width:0; padding:clamp(24px,3vw,52px) clamp(16px,4vw,64px) 96px; }

/* ---------- tipografia de contenido ---------- */
/* Titulo de la pagina. Cada capitulo tenia 0 <h1> y arrancaba en <h2>, asi
   que su esquema de encabezados no tenia raiz: las 17-70 pantallas de un
   capitulo colgaban de la nada. El <h1> es el capitulo; los <h2>, cada
   pantalla. */
.ms-pagetitle{
  font-size:clamp(1.55rem,1.1rem + 1.6vw,2.15rem); font-weight:800;
  letter-spacing:-.01em; line-height:1.2; margin:0 0 34px; color:var(--fg);
  padding-bottom:16px; border-bottom:1px solid var(--line);
}

.ms-section{ padding-top:10px; margin-bottom:52px; border-top:1px solid var(--line); }
/* :first-of-type, no :first-child: desde que existe el <h1> de la pagina la
   primera seccion ya no es el primer hijo de <main>, y con :first-child su
   linea superior volvia a aparecer pegada al borde del titulo. */
.ms-section:first-of-type{ border-top:none; padding-top:0; }
.ms-title{
  font-size:clamp(1.2rem,.9rem + .8vw,1.5rem); font-weight:800; text-transform:uppercase;
  letter-spacing:.02em; margin:26px 0 10px; color:var(--fg);
  border-left:4px solid var(--accent); padding-left:14px; line-height:1.3;
  scroll-margin-top:calc(var(--topbar-h) + 14px);
}
.ms-section:first-of-type .ms-title{ margin-top:0; }
.ms-menupath{
  font-family:var(--font-body); font-size:.85rem; font-weight:700; color:var(--link);
  background:var(--accent-bg); display:inline-block; padding:4px 12px; border-radius:20px;
  margin:0 0 18px 14px; letter-spacing:.01em;
}
/* .ms-body ya NO limita su propio ancho (ocupa todo el ancho de .ms-main):
   ver "layout de columna de lectura + capturas anchas" mas abajo, junto a
   las reglas de .ms-shot -- ahi se explica por que el limite de --measure
   se aplica por elemento (parrafos, listas, notas) y no al contenedor. */
.ms-body p{margin:0 0 14px;}
.ms-body > p{ max-width:var(--measure); margin-left:auto; margin-right:auto; }
.ms-fields, .ms-steps{
  max-width:var(--measure); margin-top:0; margin-bottom:16px;
  margin-left:auto; margin-right:auto;
}
.ms-fields{padding-left:22px;}
.ms-fields li{margin-bottom:8px;}
.ms-fields ul{margin-top:6px;}
.ms-steps{padding-left:0; list-style:none; counter-reset:step;}
.ms-steps > li{
  margin:0 0 12px; padding-left:38px; position:relative; min-height:26px;
}
.ms-steps > li::before{
  counter-increment:step; content:counter(step);
  position:absolute; left:0; top:0; width:26px; height:26px; border-radius:50%;
  background:var(--surface-2); color:var(--link); border:1px solid var(--line);
  font-family:var(--font-display); font-weight:700; font-size:.82rem;
  display:flex; align-items:center; justify-content:center;
}
.ms-fields::marker, .ms-fields li::marker{ color:var(--accent); }

.ms-note{
  display:none !important; /* notas ocultas */
}
.ms-pending{
  background:var(--danger-bg); border:1px dashed var(--danger); color:var(--fg-soft);
  padding:10px 14px; border-radius:6px; font-size:.85rem; margin:12px auto; max-width:var(--measure);
}

/* ---------- imagenes / capturas ----------
   Layout de columna de lectura + capturas anchas (arregla la portada y el
   cuerpo de texto pegados a la izquierda con espacio vacio a la derecha):
   .ms-body ya no tiene max-width propio, asi que ocupa el ancho completo de
   .ms-main. Los elementos de texto corrido (parrafos, .ms-fields, .ms-steps,
   .ms-note, .ms-pending) SI declaran max-width:var(--measure) y se centran
   con margin:auto -- quedan en una columna legible centrada en el espacio
   disponible. Las capturas de pantalla (.ms-shot, variante normal) NO se
   centran ni se limitan a --measure: quedan alineadas a la izquierda, al
   mismo margen que el texto (incluso las anidadas dentro de un <li> de
   .ms-steps/.ms-fields, para que compartan el mismo margen que el texto del
   paso), y pueden crecer hasta el ancho completo disponible -- una captura
   de ventana completa puede así ser tan ancha como haga falta para leerse
   bien, mientras un dialogo angosto simplemente no llega a ocupar todo el
   ancho, sin dejar un hueco flotante a la derecha del texto. */
.ms-shot{ margin:20px 0; text-align:left; }
/* Alinea el borde IZQUIERDO de la captura con el de la columna de texto
   centrada (en vez de con el borde de .ms-body, que ahora es mas ancho que
   la columna). calc((100% - measure)/2) es exactamente el inset que
   margin:auto le da a un elemento de --measure de ancho en este mismo
   contenedor; max(0px, ...) lo apaga solo si el contenedor ya es mas
   angosto que --measure (pantallas chicas, o anidado dentro de un <li> de
   .ms-steps/.ms-fields, donde ya no hace falta indentar mas). El resto del
   ancho (hasta el borde derecho de .ms-main) queda libre para la imagen. */
.ms-shot{
  margin-left:max(0px, calc((100% - var(--measure)) / 2));
}
/* Captura protegida: ya no hay <a> ni <img>. El contenedor .ms-shotimg trae
   su tamano real en linea (aspect-ratio + max-width, puestos por
   assemble.py), asi que reserva el hueco exacto ANTES de cargar nada -- la
   pagina no da saltos -- y manual.js le inserta dentro un <canvas> cuando la
   figura se acerca a la pantalla. */
.ms-shotimg{
  position:relative; display:block; margin:0;
  border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); background:var(--surface); overflow:hidden;
  cursor:zoom-in; transition:transform .15s ease, box-shadow .15s ease;
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none;
}
.ms-shotimg > canvas{ display:block; width:100%; height:100%; }
/* Mientras carga: un velo tenue en lugar de un hueco vacio. */
.ms-shotimg:not(.is-loaded)::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, transparent 20%, rgba(255,255,255,.05) 50%, transparent 80%);
}
/* Estado de error visible y explicado: un recuadro vacio no le dice nada a
   nadie. El caso mas comun es abrir el manual desde el disco (file://),
   donde el navegador bloquea la lectura de las capturas cifradas. */
.ms-shotimg.is-error{
  border-style:dashed; border-color:var(--note-line);
  display:flex; align-items:center; justify-content:center;
  aspect-ratio:auto !important; min-height:84px; padding:16px;
}
.ms-shot-msg{
  font-size:.84rem; line-height:1.5; color:var(--muted); text-align:center; max-width:46ch;
}
.ms-shotimg:hover{ transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.4); }
:root[data-theme="light"] .ms-shotimg:hover{ box-shadow:0 8px 20px rgba(20,20,25,.18); }
.ms-shotimg::after{
  content:""; position:absolute; right:10px; bottom:10px; width:26px; height:26px;
  border-radius:50%; background:rgba(20,20,22,.65);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M20 20l-3.8-3.8'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center; background-size:14px;
  opacity:0; transition:opacity .15s ease;
}
.ms-shotimg:hover::after{ opacity:1; }
.ms-shot figcaption{ font-size:.83rem; color:var(--muted); margin-top:8px; }
/* Las miniaturas son inline-block y varias pueden ir en fila. Antes estaban
   excluidas de la sangria de arriba, asi que quedaban pegadas al borde
   izquierdo de la pagina, sueltas y lejos del parrafo que explican. Ahora la
   primera de cada fila lleva la misma sangria que el texto; las siguientes
   no, para que la fila no se vaya escalonando. */
.ms-shot.ms-shot-small{
  display:inline-block; vertical-align:top; text-align:center;
  margin:6px 10px 10px max(0px, calc((100% - var(--measure)) / 2));
}
.ms-shot.ms-shot-small + .ms-shot.ms-shot-small{ margin-left:0; }
/* Los topes de .ms-shot-small (caja de 200x190) y .ms-shot-strip (alto
   maximo 100) ya NO se aplican aqui: los calcula assemble.py con el ancho y
   el alto reales de cada captura y los escribe como max-width en linea. Un
   recorte "pequeno" puede ser un icono casi cuadrado (54x51) o un dialogo de
   ~930px de ancho nativo; ajustando por el lado que toca, ninguno se
   deforma. Hacerlo en el build evita que estas reglas tengan que pelear con
   el estilo en linea a golpe de !important. */
.ms-shot.ms-shot-strip .ms-shotimg{ background:var(--surface-2); }
/* .ms-shot-bar: recortes de UI extremadamente anchos-y-bajos (barra de
   titulo, fila de accesos directos: relacion de aspecto > 10:1). Si se
   tratan como ms-shot-small (limite de ancho pequeno) su altura colapsa a
   unos pocos pixeles y quedan ilegibles/invisibles -- por eso se muestran
   como una captura normal (ancho libre, alineada con el texto), nunca como
   miniatura pequena. Ver assets/img/u01_cap1-3/live_barra_titulo.png
   (1032x29) y docx_accesos_directos.png (1919x162). */
.ms-shot.ms-shot-bar{ display:block; }

/* ---------- tablas ---------- */
.ms-table{
  width:100%; border-collapse:collapse; margin:0 0 16px; font-size:.92rem;
  display:block; overflow-x:auto; -webkit-overflow-scrolling:touch;
  border:1px solid var(--line); border-radius:var(--radius);
}
.ms-table th, .ms-table td{border:1px solid var(--line); padding:9px 12px; text-align:left;}
.ms-table th{
  background:var(--surface-2); font-weight:700; color:var(--fg);
  font-family:var(--font-display); font-size:.82rem; text-transform:uppercase; letter-spacing:.03em;
}
.ms-table tbody tr:nth-child(even){ background:var(--surface); }

.ms-statusbadge{
  display:inline-block; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  padding:3px 10px; border-radius:20px; margin-left:8px; vertical-align:middle;
}
.ms-statusbadge.ok{background:var(--ok-bg); color:var(--ok);}
.ms-statusbadge.review{background:var(--danger-bg); color:var(--danger); }
:root:not([data-theme="light"]) .ms-statusbadge.review{ color:#f3a3a3; }

/* ---------- lightbox (mejora progresiva sobre <a target="_blank"><img></a>) ---------- */
.ms-lightbox{
  position:fixed; inset:0; z-index:100; display:none; align-items:center; justify-content:center;
  padding:5vh 4vw; background:rgba(8,8,9,.86);
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}
.ms-lightbox.open{ display:flex; }
.ms-lightbox-stage{
  display:flex; align-items:center; justify-content:center; max-width:100%; max-height:90vh;
  color:#e8e8ea; font-size:.9rem;
}
.ms-lightbox-stage canvas{
  max-width:100%; max-height:90vh; border-radius:8px; box-shadow:0 20px 60px rgba(0,0,0,.6);
  background:var(--surface);
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none;
}
.ms-lightbox-close{
  position:absolute; top:18px; right:22px; width:40px; height:40px; border-radius:50%;
  border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.08); color:#fff;
  font-size:1.3rem; line-height:1; cursor:pointer;
}
.ms-lightbox-close:hover{ background:rgba(255,255,255,.18); }
.ms-lightbox-cap{
  position:absolute; left:0; right:0; bottom:14px; text-align:center;
  color:#e8e8ea; font-size:.85rem; padding:0 16px;
}

/* ---------- buscador (Ctrl+K / boton en la topbar) ----------
   Mismo patron que el lightbox: overlay fijo, oculto por defecto,
   .open lo muestra (ver manual.js). Panel tipo "command palette" anclado
   cerca del borde superior (no centrado verticalmente) para que la lista de
   resultados tenga espacio hacia abajo sin desplazar el input. */
.ms-search{
  position:fixed; inset:0; z-index:110; display:none;
  padding:11vh 4vw 4vh; justify-content:center;
  background:rgba(8,8,9,.6);
}
.ms-search.open{ display:flex; }
.ms-search-backdrop{ position:absolute; inset:0; }
.ms-search-panel{
  position:relative; width:100%; max-width:600px; max-height:74vh;
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--surface); border:1px solid var(--line); border-radius:calc(var(--radius) + 4px);
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.ms-search-inputwrap{
  display:flex; align-items:center; gap:10px; flex:none;
  padding:14px 16px; border-bottom:1px solid var(--line);
}
.ms-search-icon{ width:19px; height:19px; color:var(--muted); flex:none; }
.ms-search-input{
  flex:1; min-width:0; border:0; background:transparent; color:var(--fg);
  font-family:var(--font-body); font-size:1.02rem; outline:none;
}
.ms-search-input::placeholder{ color:var(--muted); }
/* Los navegadores WebKit agregan una "x" nativa para limpiar type=search;
   se retira para no duplicar la propia UI del panel. */
.ms-search-input::-webkit-search-cancel-button{ -webkit-appearance:none; appearance:none; }
.ms-search-esc{
  flex:none; font-family:var(--font-body); font-size:.72rem; color:var(--muted);
  border:1px solid var(--line); border-radius:5px; padding:2px 7px; background:var(--surface-2);
}
.ms-search-results{ overflow-y:auto; padding:8px; }
.ms-search-item{
  display:block; width:100%; text-align:left; border:0; background:transparent; cursor:pointer;
  border-radius:8px; padding:10px 12px; margin:0 0 2px; color:inherit; text-decoration:none;
}
.ms-search-item:hover, .ms-search-item.active{ background:var(--surface-2); }
.ms-search-item-chapter{
  display:block; font-family:var(--font-display); font-size:.68rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; color:var(--link); margin-bottom:3px;
}
.ms-search-item-title{ display:block; font-weight:700; color:var(--fg); font-size:.96rem; }
.ms-search-item-snippet{
  display:block; font-size:.84rem; color:var(--muted); margin-top:3px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ms-search-item mark{ background:var(--accent-bg); color:var(--link); border-radius:2px; }
.ms-search-hint, .ms-search-empty{
  padding:22px 18px; text-align:center; color:var(--muted); font-size:.88rem; margin:0;
}
/* Visibilidad de "escribe para buscar" vs. resultados/"sin resultados" la
   controla manual.js con la propiedad .hidden (no CSS: mas robusto que
   encadenar selectores :empty/[data-state] para 3 estados mutuamente
   excluyentes). */

@media (max-width:640px){
  .ms-search{ padding:8vh 3vw 3vh; }
  .ms-search-esc{ display:none; }
}

/* ---------- reemplazo de capturas (ver manual/tools/screenshot_swap_tool.py) ---------- */
.ms-shot-target img{ outline:3px solid var(--accent); outline-offset:2px; }
.ms-swap-toast{
  position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(12px);
  max-width:min(90vw,520px); background:var(--surface-2); color:var(--fg);
  border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:10px 18px; font-size:.85rem; z-index:200; opacity:0; pointer-events:none;
  transition:opacity .15s ease, transform .15s ease;
}
.ms-swap-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.ms-swap-toast.error{ color:var(--danger); border-color:var(--danger); }
:root:not([data-theme="light"]) .ms-swap-toast.error{ color:#f3a3a3; }

/* ---------- landing page (index.html) ---------- */
.ms-hero{ max-width:var(--measure); margin-left:auto; margin-right:auto; }
.ms-hero h1{ font-size:clamp(1.7rem,1.2rem + 2vw,2.5rem); margin:6px 0 14px; }
.ms-hero p{ margin:0 0 14px; }
.ms-hero h3{ font-family:var(--font-display); font-size:1.05rem; letter-spacing:.02em; margin:34px 0 12px; color:var(--fg); }
.ms-chapterlist{ list-style:none; padding:0; margin:18px 0 0; display:grid; gap:10px; }
.ms-chapterlist li{
  border:1px solid var(--line); background:var(--surface); border-radius:var(--radius);
  transition:border-color .15s ease, transform .15s ease;
}
.ms-chapterlist li:hover{ border-color:var(--accent); transform:translateX(2px); }
.ms-chapterlist a{
  display:flex; gap:12px; align-items:baseline; padding:14px 18px; text-decoration:none;
  color:var(--fg-soft); font-size:1.02rem;
}
.ms-chapterlist .ms-chapnum{
  font-family:var(--font-display); font-weight:800; color:var(--accent); flex:none; min-width:2.4em;
}
.ms-chapterlist a:hover .ms-chapnum{ color:var(--link); }
.ms-chapterlist a:hover{ color:var(--fg); }

/* ---------- campos con imagenes intercaladas ---------- */
.ms-fields-with-images{
  max-width:var(--measure); margin-top:0; margin-bottom:16px;
  margin-left:auto; margin-right:auto;
}
.ms-field-item{
  margin-bottom:24px;
}
.ms-field-item p{
  margin:0 0 12px;
}
.ms-field-item .ms-shot{
  margin-left:0;
}

/* =========================================================================
   Responsive: telefono / tablet / escritorio ancho
   ========================================================================= */

/* Escritorio muy ancho: ya limitado por --maxw arriba; nada extra que hacer. */

/* Tablet: sidebar mas angosta, menos padding. */
@media (max-width:1080px){
  .ms-sidebar{ width:228px; flex-basis:228px; }
  .ms-main{ padding:clamp(20px,3vw,36px) clamp(14px,3vw,32px) 80px; }
}

/* Sidebar pasa a panel deslizable (telefono + tablet chica). */
@media (max-width:860px){
  .ms-menutoggle{ display:inline-flex; }
  .ms-sidebar{
    position:fixed; left:0; top:var(--topbar-h); bottom:0; width:82vw; max-width:320px;
    transform:translateX(-100%); transition:transform .22s ease; z-index:25;
    box-shadow:var(--shadow); height:calc(100vh - var(--topbar-h));
  }
  .ms-sidebar.open{ transform:translateX(0); }
  .ms-sidebar-backdrop{
    display:none; position:fixed; inset:var(--topbar-h) 0 0 0; background:rgba(0,0,0,.5); z-index:24;
  }
  .ms-sidebar-backdrop.open{ display:block; }
  .ms-brand-text .ms-brand-sub{ display:none; }
}

@media (max-width:640px){
  .ms-title{ font-size:1.15rem; padding-left:11px; }
  .ms-menupath{ display:block; margin-left:0; }
  .ms-shot a::after{ opacity:1; width:22px; height:22px; }
  .ms-langswitch a{ padding:6px 9px; }
  .ms-pdfbtn{ width:34px; padding:0; }
  .ms-pdfbtn .ms-pdfbtn-t{ display:none; }
}

@media (max-width:480px){
  /* El logotipo no encoge (es un PNG con flex:none), asi que a partir de aqui
     un boton mas en la barra lo encima con el buscador. En telefono la
     descarga se ofrece desde la portada, no desde la barra. */
  .ms-pdfbtn{ display:none; }
  .ms-topbar-inner{ padding:0 12px; }
  .ms-brand-text{ font-size:.92rem; }
  .ms-main{ padding:18px 14px 64px; }
  .ms-section{ margin-bottom:38px; }
  .ms-hero h1{ font-size:1.5rem; }
  /* En telefono las miniaturas ya no compiten por el ancho: van una debajo
     de otra, a ancho completo de la columna (el max-width:100% en linea las
     limita). El tope fijo de 140px que habia aqui apuntaba al <img>, que ya
     no existe, y encogia de mas justo donde menos se lee. */
  .ms-shot.ms-shot-small{ display:block; margin-left:0; margin-right:0; }
}