/* Estilos de las páginas públicas generadas (medicamentos y guías). Los tokens de color se declaran
   aquí una sola vez, con los mismos valores de style.css (brand-*, oro-*, slate-*). */
:root {
  --brand-50: 240 249 255; --brand-200: 186 230 253; --brand-500: 0 92 151; --brand-600: 0 72 120;
  --oro-500: 201 162 39;
  --slate-200: 226 232 240; --slate-500: 100 116 139; --slate-700: 51 65 85; --slate-900: 15 23 42;
}
body.seo { margin: 0; min-height: 100vh; display: flex; flex-direction: column; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; line-height: 1.6; color: rgb(var(--slate-700)); background: rgb(248 250 252); }
.seo a { color: rgb(var(--brand-500)); text-decoration: none; }
.seo a:hover { text-decoration: underline; }
.seo-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 16px; background: rgb(255 255 255 / .9); border-bottom: 1px solid rgb(var(--slate-200)); position: sticky; top: 0; z-index: 10; }
.seo-marca img { display: block; height: 36px; width: auto; }
.seo-nav { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 14px; font-weight: 600; }
.seo-main { flex: 1; width: 100%; max-width: 56rem; margin: 0 auto; padding: 20px 16px 48px; box-sizing: border-box; }
.seo-main h1 { font-size: clamp(1.5rem, 4vw, 2.25rem); line-height: 1.2; font-weight: 800; color: rgb(var(--slate-900)); margin: 4px 0 12px; }
.seo-main h2 { font-size: 1.15rem; font-weight: 700; color: rgb(var(--slate-900)); margin: 28px 0 10px; }
.seo-main p { margin: 0 0 12px; }
.seo-main ul { padding-left: 20px; margin: 0 0 12px; }
.seo-lead { font-size: 1.05rem; }
.seo-etiqueta { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgb(var(--oro-500)); margin: 0; }
.seo-nota { font-size: 13px; color: rgb(var(--slate-500)); }
.seo-migas ol { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; padding: 0; margin: 0 0 8px; font-size: 13px; color: rgb(var(--slate-500)); }
.seo-migas li + li::before { content: '›'; margin-right: 4px; }
.seo-boton { display: inline-block; padding: 10px 18px; border-radius: 999px; background: rgb(var(--brand-500)); color: #fff !important; font-weight: 700; font-size: 14px; }
.seo-boton:hover { background: rgb(var(--brand-600)); text-decoration: none !important; }
.seo-tabla { overflow-x: auto; border: 1px solid rgb(var(--slate-200)); border-radius: 12px; background: #fff; }
.seo-tabla table { width: 100%; border-collapse: collapse; font-size: 14px; }
.seo-tabla th, .seo-tabla td { text-align: left; padding: 8px 12px; border-bottom: 1px solid rgb(var(--slate-200)); }
.seo-tabla th { background: rgb(var(--brand-50)); color: rgb(var(--slate-900)); font-size: 13px; }
.seo-lista { list-style: none !important; padding: 0 !important; display: grid; gap: 6px; }
.seo-lista li { padding: 8px 12px; background: #fff; border: 1px solid rgb(var(--slate-200)); border-radius: 10px; font-size: 14px; }
.seo-cuenta { float: right; font-size: 12px; color: rgb(var(--slate-500)); }
.seo-letras { display: flex; flex-wrap: wrap; gap: 8px; font-weight: 700; }
.seo-pie { padding: 20px 16px; text-align: center; font-size: 13px; color: rgb(var(--slate-500)); border-top: 1px solid rgb(var(--slate-200)); }
.seo-pie p { margin: 0 0 6px; }