*{box-sizing:border-box;margin:0;padding:0}body{font-family:sans-serif}.container{background-color:#3d3bcc;border-radius:15px;max-width:400px;margin:40px auto;padding:20px;font-family:Arial,Helvetica,sans-serif}h1{text-align:center;color:#fff;margin-bottom:20px;font-size:24px}.formulario{background:#fff;border:1px solid #e2e0d8;border-radius:10px;flex-direction:column;gap:20px;padding:20px;display:flex}.input-group{flex-direction:column;gap:5px;display:flex}.input-group label{color:#6b6860;font-size:14px;font-weight:600}.input-group input{background:#f7f6f2;border:1px solid #d1cfc7;border-radius:8px;padding:10px;font-size:15px}.btn-generar{color:#fff;cursor:pointer;background-color:#3d3bcc;border:none;border-radius:8px;padding:12px;transition:background .3s}.btn-generar:hover{background-color:#312fb3}.resultado{flex-direction:column;gap:20px;margin-top:25px;display:flex}.tarjeta{background:#eeeef9;border:2px solid #3d3bcc;border-radius:15px;align-items:center;gap:20px;padding:20px;display:flex}.avatar{color:#fff;background-color:#3d3bcc;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:50px;height:50px;font-size:18px;font-weight:700;display:flex}.info h2{color:#1a1917;margin:0;font-size:18px}.rol-badge{color:#3d3bcc;background:#fff;border:1px solid #c7c6f0;border-radius:4px;margin:5px 0;padding:2px 8px;font-family:monospace;font-size:11px;display:inline-block}.info p{color:#534ab7;margin:5px 0 0;font-size:13px}.btn-limpiar{color:#000;cursor:pointer;background:#fff;border:none;border-radius:8px;padding:8px;font-size:12px}.btn-limpiar:hover{background:#fffe}