@import "/assets/fonts.css"; /* ========================================================================== Sistema de diseño de teamprometheus.net — UNA hoja para todas las páginas. Identidad: "placa de registro" (marca en tinta, tipografía con carácter), con un ACENTO POR ESCRITORIO: se cambia el matiz en body[data-desk], no el resto de la paleta, así cada sección se distingue sin romper la casa. Gates de la rúbrica: sin degradados de plantilla, sin tarjetas redondeadas genéricas, contraste ≥4.5:1 en texto y ≥3:1 en bordes de campos. ========================================================================== */ :root{ --h:245; /* matiz del acento (lo pisa cada escritorio) */ --paper:oklch(97.5% 0.012 85); --paper-deep:oklch(93.5% 0.018 85); --surface:oklch(99.3% 0.005 85); --ink:oklch(23% 0.02 75); --ink-soft:oklch(45% 0.02 75); --line:oklch(85% 0.02 85); --field-line:oklch(58% 0.02 85); /* ≥3:1 contra el fondo del campo (WCAG 1.4.11) */ --signal:oklch(55% 0.14 65); --space-1:8px; --space-2:16px; --space-3:24px; --space-4:40px; --space-5:64px; --font-display:"Fraunces",Georgia,"Times New Roman",serif; --font-body:"Source Sans 3",system-ui,-apple-system,Segoe UI,sans-serif; color-scheme:light; } /* El matiz se fija en y el ACENTO SE CALCULA TAMBIÉN EN : si la fórmula viviera en :root, var(--h) se resolvería contra el valor de :root y todos los escritorios saldrían del mismo color (fallo real cazado el 30-jul con permits saliendo azul en vez de terracota). */ body{ --accent:oklch(42% 0.11 var(--h)); --accent-deep:oklch(33% 0.1 var(--h)); --accent-tint:oklch(93% 0.03 var(--h)); --cta-ink:oklch(98.5% 0.008 var(--h)); } body[data-desk="eudr"]{--h:155} body[data-desk="emissions"]{--h:200} body[data-desk="permits"]{--h:45} body[data-desk="shopify"]{--h:300} body[data-desk="reports"]{--h:95} body[data-desk="legal"]{--h:75} :root[data-theme="dark"]{ --paper:oklch(21% 0.014 85); --paper-deep:oklch(25% 0.016 85); --surface:oklch(24% 0.015 85); --ink:oklch(93% 0.012 85); --ink-soft:oklch(76% 0.014 85); --line:oklch(38% 0.018 85); --field-line:oklch(60% 0.02 85); --signal:oklch(78% 0.13 65); color-scheme:dark; } :root[data-theme="dark"] body{ --accent:oklch(74% 0.12 var(--h)); --accent-deep:oklch(84% 0.1 var(--h)); --accent-tint:oklch(30% 0.045 var(--h)); --cta-ink:oklch(17% 0.03 var(--h)); } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --paper:oklch(21% 0.014 85); --paper-deep:oklch(25% 0.016 85); --surface:oklch(24% 0.015 85); --ink:oklch(93% 0.012 85); --ink-soft:oklch(76% 0.014 85); --line:oklch(38% 0.018 85); --field-line:oklch(60% 0.02 85); --signal:oklch(78% 0.13 65); color-scheme:dark; } :root:not([data-theme="light"]) body{ --accent:oklch(74% 0.12 var(--h)); --accent-deep:oklch(84% 0.1 var(--h)); --accent-tint:oklch(30% 0.045 var(--h)); --cta-ink:oklch(17% 0.03 var(--h)); } } *{box-sizing:border-box} html,body{overflow-x:clip} body{margin:0;font-family:var(--font-body);color:var(--ink);background:var(--paper); line-height:1.65;font-size:1.05rem;-webkit-text-size-adjust:100%} a{color:var(--accent-deep)} a:hover{text-decoration-thickness:2px} img{max-width:100%;height:auto} .shell{max-width:1000px;margin:0 auto;padding:0 var(--space-3)} .skip{position:absolute;left:-9999px} .skip:focus{position:static;display:inline-block;padding:8px;background:var(--accent);color:var(--cta-ink)} /* --- barra superior: placa de marca + navegación + tema ------------------ */ .topbar{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap; padding:var(--space-2) 0;border-bottom:1px solid var(--line)} .plaque{display:inline-block;border:2px solid var(--ink);padding:5px 12px 4px;position:relative; text-decoration:none;color:var(--ink);flex:none} .plaque:after{content:"";position:absolute;inset:2.5px;border:1px solid var(--ink);pointer-events:none} .plaque .nm{display:block;font-family:var(--font-display);font-weight:700;font-size:.92rem; letter-spacing:.14em;text-transform:uppercase;line-height:1.05} .plaque:hover .nm{color:var(--accent-deep)} .topbar nav{display:flex;gap:var(--space-2);flex-wrap:wrap;font-size:.88rem} .topbar nav a{color:var(--ink-soft);text-decoration:none;white-space:nowrap} .topbar nav a:hover,.topbar nav a:focus-visible{color:var(--accent-deep);text-decoration:underline} .topbar nav a[aria-current="page"]{color:var(--ink);font-weight:700; border-bottom:2px solid var(--accent)} /* el servicio de pago se distingue del resto de la barra sin gritar */ .topbar nav a.service{color:oklch(38% 0.1 155);font-weight:700;border:1.5px solid oklch(60% 0.11 155); border-radius:999px;padding:3px 11px;line-height:1.35} .topbar nav a.service:hover{background:oklch(94% 0.04 155);text-decoration:none} :root[data-theme="dark"] .topbar nav a.service{color:oklch(84% 0.11 155);border-color:oklch(55% 0.1 155)} :root[data-theme="dark"] .topbar nav a.service:hover{background:oklch(28% 0.05 155)} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .topbar nav a.service{color:oklch(84% 0.11 155);border-color:oklch(55% 0.1 155)} :root:not([data-theme="light"]) .topbar nav a.service:hover{background:oklch(28% 0.05 155)} } button.theme{margin-left:auto;display:inline-flex;align-items:center;gap:6px;background:transparent; color:var(--ink-soft);border:1px solid var(--field-line);border-radius:999px;padding:5px 12px; font:inherit;font-size:.82rem;line-height:1;cursor:pointer;white-space:nowrap} button.theme:hover{color:var(--accent-deep);border-color:var(--accent)} button.theme:focus-visible{outline:3px solid var(--signal);outline-offset:2px} button.theme svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round} button.theme span{display:none;align-items:center;gap:6px} :root[data-theme="light"] button.theme .theme-sun{display:inline-flex} :root[data-theme="dark"] button.theme .theme-moon{display:inline-flex} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) button.theme .theme-moon{display:inline-flex}} @media (prefers-color-scheme:light){:root:not([data-theme="dark"]) button.theme .theme-sun{display:inline-flex}} /* --- cabecera editorial -------------------------------------------------- */ .mast{padding:var(--space-5) 0 var(--space-3);border-bottom:3px solid var(--ink)} .kicker{font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:.76rem;color:var(--accent-deep)} h1{font-family:var(--font-display);font-weight:700;font-size:clamp(2rem,5.2vw,3.1rem);line-height:1.07; margin:.28em 0 .32em;overflow-wrap:anywhere;min-width:0} .stand{font-size:1.14rem;max-width:38em;color:var(--ink-soft);margin:0} .stand b,.stand strong{color:var(--ink)} section{padding:var(--space-4) 0;border-bottom:1px solid var(--line)} h2{font-family:var(--font-display);font-weight:700;font-size:1.55rem;line-height:1.2;margin:0 0 var(--space-2)} h3{font-family:var(--font-display);font-weight:700;font-size:1.16rem;margin:0 0 6px} .split{display:grid;grid-template-columns:3fr 2fr;gap:var(--space-4);align-items:start} .split-even{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);align-items:start} /* --- cifras (línea de hechos) ------------------------------------------- */ .figs{display:flex;gap:var(--space-3);flex-wrap:wrap;padding:var(--space-3) 0; border-bottom:1px solid var(--line);font-size:.94rem;margin:0} .figs>div{flex:1;min-width:150px} .figs b{display:block;font-family:var(--font-display);font-size:1.35rem;font-weight:700;color:var(--accent-deep)} .figs .hot b{color:var(--signal)} /* --- paneles y datos ---------------------------------------------------- */ .panel{border:1.5px solid var(--line);border-radius:5px;background:var(--surface);padding:var(--space-3)} .panel+.panel{margin-top:var(--space-3)} .panel h3{margin-top:0} table.data{width:100%;border-collapse:collapse;font-size:.95rem} table.data th{font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft); text-align:left;padding:9px 10px;border-bottom:2px solid var(--ink)} table.data td{padding:11px 10px;border-bottom:1px solid var(--line);vertical-align:top} table.data tr.us{background:var(--accent-tint)} .tablewrap{overflow-x:auto} dl.readout{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px var(--space-2);font-size:.95rem} dl.readout dt{color:var(--ink-soft)} dl.readout dd{margin:0;font-weight:600;text-align:right} .verdict{font-family:var(--font-display);font-size:1.25rem;font-weight:700;color:var(--accent-deep); border-bottom:1px solid var(--line);padding-bottom:8px;margin:0 0 10px} /* --- índice editorial (secciones, ciudades, apps…) ---------------------- */ ol.index,ul.index{list-style:none;margin:0;padding:0} ol.index li,ul.index li{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr) auto; gap:var(--space-3);align-items:baseline;padding:var(--space-3) 0;border-top:1px solid var(--line)} ol.index li:first-child,ul.index li:first-child{border-top:0} ol.index h3,ul.index h3{margin:0} ol.index h3 a,ul.index h3 a{text-decoration:none;color:var(--ink); border-bottom:2px solid color-mix(in oklab,var(--ink) 22%,transparent)} ol.index h3 a:hover,ul.index h3 a:hover{color:var(--accent-deep);border-bottom-color:var(--accent)} ol.index p,ul.index p{margin:.2em 0 0;color:var(--ink-soft);font-size:.94rem} .count{font-family:var(--font-display);font-weight:700;font-size:1rem;color:var(--accent-deep);white-space:nowrap} /* --- formularios y llamadas a la acción --------------------------------- */ form.check{display:flex;gap:var(--space-1);flex-wrap:wrap;margin:var(--space-2) 0} input,select,textarea{font:inherit;padding:11px;border:1px solid var(--field-line);border-radius:4px; background:var(--surface);color:var(--ink);max-width:100%} input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--signal);outline-offset:1px} form.check input,form.check select{flex:1;min-width:200px} .btn,button.btn{display:inline-block;background:var(--accent);color:var(--cta-ink);border:0; padding:12px 20px;border-radius:4px;font:inherit;font-weight:700;text-decoration:none;cursor:pointer; white-space:nowrap} .btn:hover{background:var(--accent-deep)} .btn:focus-visible{outline:3px solid var(--signal);outline-offset:2px} .btn.ghost{background:transparent;color:var(--accent-deep);border:2px solid var(--accent)} .offerbox{border:1.5px solid var(--line);border-left:4px solid var(--accent);border-radius:4px; background:var(--surface);padding:var(--space-3);margin:var(--space-3) 0} .note{font-size:.88rem;color:var(--ink-soft)} .fine{font-size:.83rem;color:var(--ink-soft);line-height:1.55} .src{font-size:.8rem;color:var(--ink-soft);margin-top:var(--space-2)} details{border:1px solid var(--line);border-radius:4px;padding:11px 15px;margin:9px 0;background:var(--surface)} summary{font-weight:700;cursor:pointer} summary:focus-visible{outline:3px solid var(--signal);outline-offset:2px} .banner{border:1.5px solid var(--accent);border-left-width:4px;border-radius:4px;background:var(--accent-tint); padding:var(--space-2) var(--space-3);margin:var(--space-3) 0;font-size:.95rem} .banner>:first-child{margin-top:0} .banner>:last-child{margin-bottom:0} /* Avisos semánticos: SIEMPRE por token, nunca con un color fijo en el HTML. Un fondo claro fijo con texto claro encima dejó el resultado del comprobador EUDR ILEGIBLE en tema oscuro (fallo real reportado por el owner el 30-jul). Estos se adaptan a los dos temas. */ .banner.info{--h:230} .banner.ok{--h:150} .banner.warn{--h:70} .banner.info,.banner.ok,.banner.warn{ border-color:oklch(60% 0.12 var(--h)); background:oklch(94% 0.035 var(--h)); color:oklch(28% 0.06 var(--h)); } .banner.info b,.banner.ok b,.banner.warn b{color:oklch(22% 0.07 var(--h))} .banner.info a,.banner.ok a,.banner.warn a{color:oklch(35% 0.11 var(--h))} :root[data-theme="dark"] .banner.info,:root[data-theme="dark"] .banner.ok,:root[data-theme="dark"] .banner.warn{ border-color:oklch(55% 0.11 var(--h)); background:oklch(27% 0.045 var(--h)); color:oklch(91% 0.03 var(--h)); } :root[data-theme="dark"] .banner.info b,:root[data-theme="dark"] .banner.ok b,:root[data-theme="dark"] .banner.warn b{color:oklch(96% 0.02 var(--h))} :root[data-theme="dark"] .banner.info a,:root[data-theme="dark"] .banner.ok a,:root[data-theme="dark"] .banner.warn a{color:oklch(85% 0.1 var(--h))} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .banner.info,:root:not([data-theme="light"]) .banner.ok,:root:not([data-theme="light"]) .banner.warn{ border-color:oklch(55% 0.11 var(--h)); background:oklch(27% 0.045 var(--h)); color:oklch(91% 0.03 var(--h)); } :root:not([data-theme="light"]) .banner.info b,:root:not([data-theme="light"]) .banner.ok b,:root:not([data-theme="light"]) .banner.warn b{color:oklch(96% 0.02 var(--h))} :root:not([data-theme="light"]) .banner.info a,:root:not([data-theme="light"]) .banner.ok a,:root:not([data-theme="light"]) .banner.warn a{color:oklch(85% 0.1 var(--h))} } /* --- pie con la capa de confianza --------------------------------------- */ footer.site{padding:var(--space-4) 0 var(--space-5);color:var(--ink-soft);font-size:.86rem} footer.site h2{font-size:1.05rem;font-family:var(--font-body);font-weight:700; letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:var(--space-2);font-size:.76rem} .trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:var(--space-3); padding-bottom:var(--space-3);border-bottom:1px solid var(--line)} .trust ul{list-style:none;margin:0;padding:0} .trust li{margin:5px 0} .trust a{color:var(--ink-soft)} .trust a:hover{color:var(--accent-deep)} footer.site .legalrow{padding-top:var(--space-3);display:flex;gap:var(--space-2);flex-wrap:wrap} footer.site .who{margin-top:var(--space-2)} /* --- puente de clases heredadas ----------------------------------------- */ /* Los generadores antiguos emiten .card/.tag/.stat/.pill/.muted/.cta. En vez de reescribir 234 páginas de contenido de golpe (riesgo alto), esas clases se reasignan al sistema nuevo. Al reescribir un generador se deja de depender de este bloque; cuando no quede ninguno, borrar. */ .wrap{max-width:1000px;margin:0 auto;padding:0} .card{border:1.5px solid var(--line);border-radius:5px;background:var(--surface); padding:var(--space-3);margin:var(--space-3) 0;box-shadow:none} .card h3{margin-top:0} .tag{font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:.76rem;color:var(--accent-deep)} .muted{color:var(--ink-soft)} /* Filas de controles: la etiqueta encima del campo y aire real entre columnas. Antes las etiquetas iban pegadas a los desplegables ("recuadros muy pegados con texto", owner 30-jul). */ .row{display:flex;gap:var(--space-3);flex-wrap:wrap;align-items:flex-end} .row>div{display:flex;flex-direction:column;gap:6px;min-width:0} .row label,.panel label,.card label{display:block;font-weight:600;font-size:.85rem; color:var(--ink-soft);margin-bottom:4px} .row select,.row input{width:100%} .card>*+*,.panel>*+*{margin-top:var(--space-2)} .card>h3:first-child,.panel>h3:first-child{margin-top:0} .card ul,.panel ul{margin:var(--space-1) 0} .card table,.panel table{margin-top:var(--space-2)} .stat{flex:1;min-width:140px;padding:var(--space-2) 0;text-align:left;background:transparent;border-radius:0} .stat b{display:block;font-family:var(--font-display);font-size:1.35rem;font-weight:700;color:var(--accent-deep)} .stat span{color:var(--ink-soft);font-size:.88rem} .pill{display:inline-block;background:var(--accent);color:var(--cta-ink);padding:10px 18px;border-radius:4px; font-weight:700;text-decoration:none;margin:6px 8px 0 0;white-space:nowrap} .pill:hover{background:var(--accent-deep)} .cta{border:1.5px solid var(--line);border-left:4px solid var(--accent);border-radius:4px; background:var(--surface);color:var(--ink);padding:var(--space-3);margin:var(--space-3) 0} .cta h3{margin:0 0 8px;color:var(--ink)} .cta a{color:var(--accent-deep);font-weight:700} .cta .pill{color:var(--cta-ink)} table:not(.data){width:100%;border-collapse:collapse;font-size:.94rem} table:not(.data) th,table:not(.data) td{text-align:left;padding:10px;border-bottom:1px solid var(--line)} table:not(.data) th{font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft); border-bottom:2px solid var(--ink)} main>header:not(.mast){padding:var(--space-5) 0 var(--space-3);border-bottom:3px solid var(--ink);text-align:left} main>header:not(.mast) h1{margin:.28em 0 .32em} footer:not(.site){text-align:left;color:var(--ink-soft);font-size:.86rem;padding:var(--space-3) 0 0} /* niveles de riesgo país (EUDR) y listas de comprobación */ .tier{display:inline-block;padding:3px 12px;border-radius:3px;font-weight:700;font-size:.85rem;border:1.5px solid} .tier.low{background:oklch(93% 0.05 150);color:oklch(32% 0.1 150);border-color:oklch(60% 0.12 150)} .tier.standard{background:oklch(94% 0.06 85);color:oklch(38% 0.11 65);border-color:oklch(65% 0.13 75)} .tier.high{background:oklch(93% 0.05 25);color:oklch(38% 0.14 25);border-color:oklch(60% 0.16 25)} :root[data-theme="dark"] .tier.low{background:oklch(28% 0.05 150);color:oklch(85% 0.11 150);border-color:oklch(55% 0.11 150)} :root[data-theme="dark"] .tier.standard{background:oklch(29% 0.05 75);color:oklch(86% 0.12 80);border-color:oklch(58% 0.12 75)} :root[data-theme="dark"] .tier.high{background:oklch(28% 0.06 25);color:oklch(85% 0.12 25);border-color:oklch(58% 0.15 25)} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .tier.low{background:oklch(28% 0.05 150);color:oklch(85% 0.11 150);border-color:oklch(55% 0.11 150)} :root:not([data-theme="light"]) .tier.standard{background:oklch(29% 0.05 75);color:oklch(86% 0.12 80);border-color:oklch(58% 0.12 75)} :root:not([data-theme="light"]) .tier.high{background:oklch(28% 0.06 25);color:oklch(85% 0.12 25);border-color:oklch(58% 0.15 25)} } /* piezas propias de páginas concretas que vivían en el CSS viejo de cada generador */ img.avatar{width:76px;height:76px;border-radius:50%;border:1px solid var(--line);object-fit:cover; display:block;margin-bottom:var(--space-1)} /* Columnas numéricas. La introduje yo al reescribir las tablas y NUNCA la definí: los números salieron sin alinear en permits, reports y shopify (cazado por audit-static el 30-jul). */ .num{text-align:right;white-space:nowrap} th.num,td.num{text-align:right} /* Celdas de sí/no de las tablas comparativas de las landings (su estilo vivía en el CSS propio de cada página y se perdió al migrarlas al sistema). Se distinguen por color Y por marca, no solo por color: quien no distingue rojo/verde también tiene que poder leerlas. */ td.y,td.n{font-weight:600} td.y{color:oklch(35% 0.11 150)} td.n{color:oklch(40% 0.14 25)} td.y:before{content:"✓ ";font-weight:700} td.n:before{content:"✗ ";font-weight:700} :root[data-theme="dark"] td.y{color:oklch(83% 0.11 150)} :root[data-theme="dark"] td.n{color:oklch(80% 0.12 25)} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) td.y{color:oklch(83% 0.11 150)} :root:not([data-theme="light"]) td.n{color:oklch(80% 0.12 25)} } /* Tarjetas de precio y rejillas de tarjetas de las landings migradas. */ .tiers,.apps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--space-3); margin:var(--space-3) 0} .tier{border:1.5px solid var(--line);border-top:4px solid var(--accent);border-radius:5px; background:var(--surface);padding:var(--space-3)} .tier h3{margin-top:0} .tier ul{margin:var(--space-2) 0;padding-left:1.2em} .tier li{margin:.25em 0} .price{font-family:var(--font-display);font-size:1.6rem;font-weight:700;color:var(--accent-deep); line-height:1.1;margin:6px 0 var(--space-2)} /* Rejilla de enlaces (países de emissions, commodities de EUDR…). Tenía su regla en el CSS viejo de cada generador; al unificar se quedó sin estilo y el texto se salía del recuadro (fallo reportado por el owner el 30-jul en "Browse by country"). */ .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px var(--space-2); margin:var(--space-2) 0} .grid>a{display:block;padding:6px 8px;border-radius:3px;text-decoration:none;color:var(--accent-deep); overflow-wrap:anywhere;min-width:0;border:1px solid transparent} .grid>a:hover{background:var(--accent-tint);border-color:var(--accent)} ul.dir{list-style:none;padding:0;margin:var(--space-2) 0;columns:3;column-gap:var(--space-3);font-size:.94rem} ul.dir li{margin:3px 0;break-inside:avoid} @media (max-width:760px){ul.dir{columns:2}} @media (max-width:420px){ul.dir{columns:1}} /* botones sin clase (los generadores viejos estilaban `button` a pelo) */ main button:not(.theme){background:var(--accent);color:var(--cta-ink);border:0;padding:12px 20px; border-radius:4px;font:inherit;font-weight:700;cursor:pointer;white-space:nowrap} main button:not(.theme):hover{background:var(--accent-deep)} main button:not(.theme):focus-visible{outline:3px solid var(--signal);outline-offset:2px} ul.check{list-style:none;padding:0;margin:var(--space-2) 0} ul.check li{padding:5px 0 5px 26px;position:relative} ul.check li:before{content:"—";position:absolute;left:2px;color:var(--accent);font-weight:700} /* Cifras y celdas largas: que rompan antes de empujar su caja. Sin esto, un número o un nombre largo desbordaba el bloque en móvil (cazado por audit-render el 30-jul en perfiles y stats). */ .stat,.figs>div{min-width:0} .stat b,.figs b,.verdict,.count{overflow-wrap:anywhere} /* Los "pill" heredados llevaban nowrap: con etiquetas largas (y en español son más largas) se salían de su contenedor en móvil. */ .pill{white-space:normal;overflow-wrap:anywhere} @media (max-width:760px){ .split,.split-even{grid-template-columns:1fr} ol.index li,ul.index li{grid-template-columns:1fr;gap:4px} .count{order:-1;font-size:.88rem} dl.readout dd{text-align:left} .mast{padding-top:var(--space-4)} /* Las tablas heredadas viven dentro de .card sin envoltorio de scroll: en móvil empujaban la página entera y aparecía scroll horizontal (5 plantillas afectadas, audit-render 30-jul). Ahora la tabla se desplaza DENTRO de su caja y la página no se mueve. */ .card,.panel,#out{overflow-x:auto} .btn,.pill{white-space:normal} table:not(.data){font-size:.9rem} } @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}