/* Original editorial diagrams. Text remains selectable and readable on mobile. */
.codigo-figura { margin:0 0 38px; border:1px solid #dce4ee; border-radius:20px; padding:24px; background:#f8fafc; }
.codigo-figura__etiqueta { color:#52647c; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.07em; }
.guia-content .codigo-figura__cabecera h2 { font-size:24px; margin:7px 0 20px; }
.codigo-producto { display:flex; align-items:center; gap:14px; border:1px solid #e2e8f0; padding:14px; background:white; border-radius:12px; margin-bottom:16px; }
.codigo-producto svg { width:56px; height:56px; flex-shrink:0; stroke:#c65b16; stroke-width:2; stroke-linejoin:round; }
.codigo-producto strong,.codigo-producto span { display:block; }
.codigo-producto strong { color:#172337; font-size:15px; line-height:1.4; }
.codigo-producto span { color:#64748b; font-size:12px; margin-top:4px; }
.codigo-tres-datos { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.codigo-dato { padding:15px; border-radius:12px; background:white; border:1px solid #dce4ee; border-top:4px solid #475569; }
.codigo-dato--sunat { border-top-color:#3563a5; }
.codigo-dato--sku { border-top-color:#b65310; }
.codigo-dato--barras { border-top-color:#0f766e; }
.codigo-dato__numero { font-size:11px; color:#64748b; display:block; line-height:1.5; }
.codigo-dato h3 { font-size:16px; line-height:1.4; margin:8px 0 14px; color:#16243a; }
.codigo-dato strong { font-size:13px; line-height:1.5; display:block; }
.guia-content .codigo-dato p { font-size:12px; line-height:1.65; margin:10px 0 0; }
.codigo-dato code,.codigo-variante code { display:inline-block; font:700 18px ui-monospace,monospace; color:#84400e; background:#fff3e8; padding:7px 9px; border-radius:6px; }
.codigo-barras-dibujo { height:38px; width:100%; max-width:130px; margin:0 0 10px; background:repeating-linear-gradient(90deg,#334155 0 2px,transparent 2px 5px,#334155 5px 6px,transparent 6px 9px,#334155 9px 13px,transparent 13px 16px); }
.codigo-figura figcaption { font-size:12px; color:#52647c; line-height:1.65; margin-top:17px; }
.codigo-variantes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.codigo-variante { display:flex; flex-direction:column; align-items:center; gap:9px; padding:18px; border:1px solid #dce4ee; border-radius:12px; background:white; text-align:center; }
.codigo-variante svg { width:120px; height:70px; stroke:#51627b; stroke-width:2; stroke-linejoin:round; }
.codigo-variante>span { font-size:16px; font-weight:700; }
.guia-content .codigo-variante p { font-size:13px; margin:0; line-height:1.6; }
.codigo-presentacion { margin-top:16px; padding:18px; border:1px solid #cbded8; background:#f1faf6; border-radius:12px; text-align:center; }
.codigo-presentacion>span { font-size:12px; color:#33594b; }
.codigo-presentacion>div { font-size:21px; color:#17543f; margin:10px 0; }
.guia-content .codigo-presentacion p { font-size:13px; line-height:1.65; margin:0; }
.guia-related { border-left:3px solid #d8a06c; padding-left:18px; }
.guia-tabla-scroll { overflow-x:auto; margin:18px 0; border:1px solid #dce4ee; border-radius:10px; }
.guia-tabla { width:100%; border-collapse:collapse; font-size:15px; line-height:1.6; }
.guia-tabla caption { text-align:left; padding:12px 14px; font-weight:700; color:#172337; background:#f8fafc; }
.guia-tabla th,.guia-tabla td { text-align:left; vertical-align:top; padding:11px 14px; border-top:1px solid #e2e8f0; }
.guia-tabla th { background:#f1f5f9; color:#172337; }
.guia-tabla td:first-child { font-weight:700; white-space:nowrap; }
.guia-aside--conversion { padding:0; overflow:hidden; }
.guia-aside__prueba { padding:22px; background:linear-gradient(150deg,#fff5e9,#fff); }
.guia-aside__etiqueta { display:block; font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:#8c4819; font-weight:800; }
.guia-aside--conversion h2 { font-size:21px; line-height:1.3; color:#172337; margin:8px 0 12px; }
.guia-aside__prueba p { font-size:14px; line-height:1.7; margin:0 0 17px; }
.guia-aside a.guia-aside__boton { display:flex; align-items:center; justify-content:center; gap:9px; min-height:46px; padding:10px 12px; border-radius:9px; color:#fff; background:#a94709; font-size:14px; font-weight:800; text-decoration:none; }
.guia-aside a.guia-aside__boton:hover { background:#8f3906; color:#fff; }
.guia-aside a.guia-aside__boton:focus-visible { outline:3px solid #172337; outline-offset:3px; }
.guia-aside a.guia-aside__planes { display:block; text-align:center; font-size:12px; margin-top:13px; font-weight:600; }
.guia-aside__relacionadas { padding:20px 22px; border-top:1px solid #e5eaf1; }
.guia-aside__relacionadas h2 { font-size:16px; margin:0 0 13px; }
.guia-aside__relacionadas ul { list-style:none; padding:0; margin:0; }
.guia-aside__relacionadas li+li { border-top:1px solid #edf0f5; margin-top:9px; padding-top:9px; }
.guia-aside__relacionadas li a { font-size:13px; font-weight:600; line-height:1.65; }
.guia-aside a.guia-aside__todas { margin-top:16px; font-size:12px; }
@media(min-width:761px) { .guia-aside--conversion { max-height:calc(100dvh - 40px); overflow-y:auto; } }
@media(max-width:760px) { .guia-aside--conversion { position:static; } .guia-aside__relacionadas li a,.guia-aside a.guia-aside__planes,.guia-aside a.guia-aside__todas { display:flex; align-items:center; min-height:44px; } }
@media(max-width:1000px) { .codigo-tres-datos { grid-template-columns:1fr; } .codigo-dato { padding:16px; } }
@media(max-width:520px) { .codigo-figura { padding:16px; border-radius:14px; } .codigo-variantes { grid-template-columns:1fr; } .guia-content .codigo-figura__cabecera h2 { font-size:22px; } }