/* GENERADO por csp-convert.py: antiguos atributos style="" convertidos a clases
   para cumplir Content-Security-Policy default-src 'self' (sin estilos inline). */
.u1{max-width: 900px; margin: 0 auto; padding: 24px}
.u2{margin-top: 32px}
.u3{color: var(--accent)}
.u4{text-align: left}
.u5{border:1px solid #444}
.u6{color: var(--muted); font-size: 14px}
.u7{color: var(--muted)}
.u8{grid-column: 1/-1; padding: 4rem}
.u9{background: var(--surface); padding: 16px; border-radius: 12px; margin: 16px 0; border-left: 4px solid var(--primary)}
.u10{background: var(--surface); padding: 20px; border-radius: 12px; margin: 16px 0; overflow-x: auto}
.u11{color: var(--accent); font-size: 14px}
.u12{background: var(--surface); padding: 16px; border-radius: 12px; margin: 16px 0; border-left: 4px solid #ff6b6b}
.u13{background: var(--surface); padding: 16px; border-radius: 12px; margin: 16px 0}
.u14{width: 100%; border-collapse: collapse; margin: 20px 0}
.u15{background: var(--surface-light); border-bottom: 2px solid var(--primary)}
.u16{padding: 12px; text-align: left}
.u17{border-bottom: 1px solid var(--surface)}
.u18{padding: 12px}
.u19{padding: 12px; color: var(--accent)}
.u20{display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin: 20px 0}
.u21{background: var(--surface); padding: 20px; border-radius: 12px; border-left: 4px solid #ff6b6b}
.u22{color: #ff6b6b; margin-top: 0}
.u23{background: var(--surface); padding: 20px; border-radius: 12px; border-left: 4px solid #ffa94d}
.u24{color: #ffa94d; margin-top: 0}
.u25{background: var(--surface); padding: 20px; border-radius: 12px; border-left: 4px solid #69db7c}
.u26{color: #69db7c; margin-top: 0}
.u27{background: var(--surface); padding: 20px; border-radius: 12px; border-left: 4px solid #da77f2}
.u28{color: #da77f2; margin-top: 0}
.u29{background: var(--surface); padding: 20px; border-radius: 12px; border-left: 4px solid #f1c40f}
.u30{color: #f1c40f; margin-top: 0}
.u31{background: var(--surface); padding: 16px; border-radius: 12px; margin: 16px 0; border-left: 4px solid #f1c40f}
.u32{width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 14px}
.u33{padding: 10px; text-align: left}
.u34{padding: 10px; text-align: center}
.u35{padding: 10px}
.u36{padding: 10px; text-align: center; color: var(--accent)}
.u37{padding: 10px; text-align: center; color: #ff6b6b}
.u38{padding: 10px; color: var(--accent)}
.u39{border-bottom: 1px solid var(--surface); background: linear-gradient(90deg, rgba(255,0,0,0.1), rgba(0,255,0,0.1), rgba(0,0,255,0.1))}
.u40{padding: 12px; font-weight: bold}
.u41{border-bottom: 1px solid var(--surface); background: rgba(0, 255, 100, 0.1)}
.u42{border-bottom: 1px solid var(--surface); background: linear-gradient(90deg, rgba(128,0,255,0.2), rgba(255,0,128,0.2))}
.u43{padding: 12px; font-weight: bold; color: var(--accent)}
.u44{background: linear-gradient(135deg, rgba(255,100,100,0.1), rgba(100,255,100,0.1), rgba(100,100,255,0.1)); padding: 24px; border-radius: 16px; margin: 20px 0; border: 2px solid rgba(255,255,255,0.2)}
.u45{margin-top: 0; color: #fff}
.u46{font-style: italic; color: var(--muted)}
.u47{background: rgba(0, 255, 100, 0.05); padding: 24px; border-radius: 16px; margin: 20px 0; border: 2px solid rgba(0, 255, 100, 0.3)}
.u48{margin-top: 0; color: #00ff64}
.u49{background: linear-gradient(135deg, rgba(128,0,255,0.15), rgba(255,0,128,0.15)); padding: 24px; border-radius: 16px; margin: 20px 0; border: 2px solid rgba(200,0,200,0.5)}
.u50{margin-top: 0; color: #ff00ff}
.u51{background: rgba(255,0,0,0.2); padding: 12px; border-radius: 8px; margin: 12px 0}
.u52{background: var(--surface); padding: 16px; border-radius: 8px; font-size: 12px; line-height: 1.8; overflow-x: auto}
.u53{display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin: 16px 0}
.u54{background: var(--surface); padding: 8px; border-radius: 6px; text-align: center; font-size: 12px}
.u55{display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 20px 0}
.u56{margin-top: 0; color: #69db7c}
.u57{font-size: 14px}
.u58{margin-top: 0; color: #ffa94d}
.u59{background: var(--surface); padding: 16px; border-radius: 12px; margin: 12px 0}
.u60{width: 100%; font-size: 13px}
.u61{padding: 6px}
.u62{padding: 6px; color: var(--accent)}
.u63{background: var(--surface); padding: 16px; border-radius: 12px; margin: 12px 0; border-left: 4px solid var(--accent)}
.u64{font-size: 12px; color: var(--muted); margin-top: 0}
.u65{color: #ff6b6b}
.u66{color: #ffa94d}
.u67{color: #69db7c}
.u68{width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14px}
.u69{padding: 8px}
.u70{padding: 8px; color: #da77f2}
.u71{padding: 8px; color: var(--accent)}
.u72{display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 20px 0}
.u73{background: var(--surface); padding: 12px; border-radius: 8px; text-align: center}
.u74{font-size: 24px}
.u75{font-size: 12px; color: var(--muted)}
.u76{border-bottom: 1px solid var(--surface); background: rgba(255, 68, 68, 0.1)}
.u77{padding: 12px; color: #ff4444; font-weight: bold}
.u78{border-bottom: 1px solid var(--surface); background: rgba(255, 136, 68, 0.1)}
.u79{padding: 12px; color: #ff8844; font-weight: bold}
.u80{padding: 12px; color: #ffffff}
.u81{border-bottom: 1px solid var(--surface); background: rgba(68, 136, 255, 0.1)}
.u82{padding: 12px; color: #4488ff; font-weight: bold}
.u83{border-bottom: 1px solid var(--surface); background: rgba(136, 136, 136, 0.1)}
.u84{padding: 12px; color: #888888; font-weight: bold}
.u85{color: #ff8844}
.u86{color: #4488ff}
.u87{color: #888888}
.u88{color: #ff4444}
.u89{color: var(--accent); font-weight: 600}